资讯频道 → Web前端
阅读更多

9顶
0踩

Web前端

原创新闻 使用css transformations 创建三维立方体

2009-05-12 12:00 by 副主编 zly06 评论(3) 有7759人浏览
CSS webkit

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

现在有一个更为先进的方法，使用css transformations，在不使用JavaScript, imagery,canvas或SVG的情况下也能创建三维立方体。不过目前只支持基于WebKit和Gecko的浏览器：Firefox 3.5+ -moz-transform (documentation)和 Safari 3.2+ -webkit-transform (documentation)。


使用CSS创建三维立方体
支持浏览器：Safari 3.2+, Google Chrome, Firefox 3.5+

multiple立方体和CSS transitions ，不使用JavaScript
支持浏览器：Safari 4+, Google Chrome

 

点击查看详情：http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/


完整的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;
}
  • 大小: 116.7 KB
来自: ajaxian
9
顶
0
踩
评论 共 3 条 请登录后发表评论
3 楼 jasongreen 2009-05-15 10:32
等IE支持才行

浏览器必须要AutoUpdate功能才行啊，IE没有，但IE就算有，估计也会被骂。
2 楼 inosin 2009-05-13 08:47
用的全是专有属性，太不亲民！！！
啥时候css3能一统天下才大有可为~
1 楼 1314520ln 2009-05-13 08:43
看来要开始学css了~

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Global site tag (gtag.js) - Google Analytics