博客 - 标签：transform

利用css中transform属性实现3d

2009-07-16 下午 - html/css/xml/xsl - - -

先上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/

2 Comments »