当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS 3D立方体制作

CSS样式表
关于CSS的一些基础应用
纯CSS实现的无侵入的卡盘（幻灯片）
w3c标准自适应高度height100%不起作用的问题分析
CSS代码组合和嵌套
CSS常用属性缩写实例
CSS代码缩写实例以及CSS缩写原因总结
网页字体大小的设计技巧
CSS3的新特性介绍
DOCTYPE和XHTML的相关认识
DIV CSS建立的符合web标准网页的好处
CSS语法缩写规则
FireFox浏览器和IE浏览器下CSS兼容问题
CSS代码属性分组的写法例子
解决全部网页木马的技巧
css教程:DIV垂直居中的办法
css常用布局多行多列
不同浏览器的CSS Hack写法小结
CSS 控制字符宽度省略号效果 兼容浏览器
纯CSS实现的三级下拉菜单实现代码
快速定位页面中复杂 CSS BUG

No. « 11 12 13 14 »

技术文章搜索

关键字

CSS样式表 中的 CSS 3D立方体制作

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-27   浏览: 122 ::
收藏到网摘: n/a

无需JavaScript, imagery, canvas 或者SVG，就可以利用最新的CSS制作出3D立方体，这的确是一件让人难以想象的事情。

目前制作出来的效果，只有Firefox 3.5，Safari 3.2+，Google Chorme支持。下面来为大家列举出相关演示和代码。

3D CSS

 

3D CSS

结果演示

单个静态3D立方体

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

三个滑动的动态3D立方体

支持浏览器：Safari 4+, Google Chrome

怎么制作?

其实使用DIV容器的代码很简单，如下：

                                      
<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;
}