CSS 3D立方体制作
网站建设 2021-07-03 08:42www.dzhlxh.cn网站建设
无需JavaScript, imagery, canvas 或者SVG，就可以利用最新的CSS制作出3D立方体，这的确是一件让人难以想象的事情。
目前制作出来的效果，只有Firefox 3.5，Safari 3.2+，Google Chorme支持。狼蚁网站SEO优化来为大家列举出相关演示和代码。
3D CSS
结果演示
支持浏览器：Safari 3.2+, Google Chrome, Firefox 3.5+
支持浏览器：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; } |
上一篇：FireFox正常 IE错位的绝对定位元素
下一篇：css 不兼容性问题小结