利用css中transform属性实现3d

博客 - html/css/xml/xsl

利用css中transform属性实现3d

先上PP，容易明白此文内容。

multiple-cubes-css

不需要用到脚本(js)，仅css中transform属性(firefox文档, safari文档)，适当设置“值”，就能实现很酷的3d效果。

浏览器支持：Safari 3.2+, Google Chrome, Firefox 3.5+

基本是个华而无实的效果了，呵呵！玩玩还是不错的！

html：

<div class="cube">
   <div class="topFace">
   <div>Content</div>
   </div>
   <div class="leftFace">Content</div>
   <div class="rightFace">Content</div>
</div>

css：

.cube {position: relative;top: 200px;}
.rightFace,.leftFace,.topFace div {
   padding: 10px;
   width: 180px;
   height: 180px;
}
.rightFace,.leftFace,.topFace {
   position: absolute;
}
.leftFace {
   -webkit-transform: skewY(30deg);
   -moz-transform: skewY(30deg);
   background-color: #ccc;
}
.rightFace {
   -webkit-transform: skewY(-30deg);
   -moz-transform: skewY(-30deg);
   background-color: #ddd;
   left: 200px;
}
.topFace div {
   -webkit-transform: skewY(-30deg) scaleY(1.16);
   -moz-transform: skewY(-30deg) scaleY(1.16);
   background-color: #eee;
   font-size: 0.862em;
}
.topFace {
   -webkit-transform: rotate(60deg);
   -moz-transform: rotate(60deg);
   top: -158px;
   left: 100px;
}

看个例子：

3d演示文档 – 注意：Safari 3.2+, Google Chrome, Firefox 3.5+才能显示正确效果

本来出处：http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/