利用css中transform属性实现3d

heluyao — Thu, 16 Jul 2009 06:02:36 +0000

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

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

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

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

html：

<div class="cube">
   <div class="topFace">
   <div>Contentdiv>
   div>
   <div class="leftFace">Contentdiv>
   <div class="rightFace">Contentdiv>
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/

Heluyao's Blog » transform

利用css中transform属性实现3d