大佬教程收集整理的这篇文章主要介绍了html5 – CSS透视无法正常工作,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我不明白为什么这个观点不起作用.
这是最佳做法吗?
是否可以整体旋转立方体?
资料来源:24ways.
HTML:
<section class="container"> <div id="cube"> <figure class="front">1</figure> <figure class="back">2</figure> <figure class="right">3</figure> <figure class="left">4</figure> <figure class="top">5</figure> <figure class="bottom">6</figure> </div> </section>
CSS:
.container { margin: 200px auto; width: 200px; height: 200px; position: relative; -webkit-perspective: 800px; } #cube { width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; } #cube figure { width: 198px; height: 198px; display: block; position: absolute; border: 1px solid #ddd; background-color: rgba(0,0.2); } #cube .front { -webkit-transform: rotateY(0deg) translateZ(100px); } #cube .back { -webkit-transform: rotateX(180deg) translateZ(100px); } #cube .right { -webkit-transform: rotateY(90deg) translateZ(100px); } #cube .left { -webkit-transform: rotateY(-90deg) translateZ(100px); } #cube .top { -webkit-transform: rotateX(90deg) translateZ(100px); } #cube .bottom { -webkit-transform: rotateX(-90deg) translateZ(100px); }
以上是大佬教程为你收集整理的html5 – CSS透视无法正常工作全部内容,希望文章能够帮你解决html5 – CSS透视无法正常工作所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。