CSS 3D立方体制作
建站知识 2021-07-03 08:42www.168986.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="Face"> <div>Content</div> </div> <div class="leftFace">Content</div> <div class="rightFace">Content</div> </div> |
CSS来控制
.cube { position: relative; : 200px; } .rightFace, .leftFace, .Face div { padding: 10px; width: 180px; height: 180px; } .rightFace, .leftFace, .Face { position: absolute; } .leftFace { -webkit-transform: skewY(30deg); -moz-transform: skewY(30deg); background-color: #c; } .rightFace { -webkit-transform: skewY(-30deg); -moz-transform: skewY(-30deg); background-color: #ddd; left: 200px; } .Face div { -webkit-transform: skewY(-30deg) scaleY(1.16); -moz-transform: skewY(-30deg) scaleY(1.16); background-color: #eee; font-size: 0.862em; } .Face { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); : -158px; left: 100px; } |
上一篇:FireFox正常 IE错位的绝对定位元素
下一篇:css 不兼容性问题小结
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML