本文将为大家详细介绍“如何使用Css实现空间旋转”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“如何使用Css实现空间旋转”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获新知识吧。
<div> <!--舞台元素,设置perspective,让其子元素获得透视效果。--> <div> <!-- 容器,设置transform-style: preserve-3d,让其子元素在3D空间呈现--> <div class="top slide"></div> <!--立方体的六个面--> <div class="bottom slide"></div> <div class="left slide"></div> <div class="right slide"></div> <div class="front slide"></div> <div class="back slide"></div> </div> </div>
先建出来六个div然后再依次给它们设置样式
再来看它们的样式表
<style type="text/css"> .rect-wrap { position: relative; perspective: 1600px; } .container { width: 800px; height: 800px; transform-style: preserve-3d; transform-origin: 50% 50% 200px; /*设置3d空间的原点在平面中心再向Z轴移动200px的位置*/ } .slide { width: 400px; height: 400px; position: absolute; //定位 } .top { left: 200px; top: -200px; transform: rotateX(-90deg); transform-origin: bottom; background-color:#C69 } .bottom { left: 200px; bottom: -200px; transform: rotateX(90deg); transform-origin: top; background-color:#6FF } .left { left: -200px; top: 200px; transform: rotateY(90deg); transform-origin: right; background-color:#9F0 } .right { left: 600px; top: 200px; transform: rotateY(-90deg); transform-origin: left; background-color:#33F } .front { left: 200px; top: 200px; transform: translateZ(400px); background-color:#366 /*立方体前面正对着屏幕,所以不用旋转,只需向Z轴前移动距离*/ } .back { left: 200px; top: 200px; transform: translateZ(0); background-color:#09F /*立方体后面正对着屏幕,所以不用旋转,只需向Z轴后移动距离*/ } @keyframes rotate-frame { 0% { transform: rotateX(0deg) rotateY(0deg); } 10% { transform: rotateX(0deg) rotateY(180deg); } 20% { transform: rotateX(-180deg) rotateY(180deg); } 30% { transform: rotateX(-360deg) rotateY(180deg); } 40% { transform: rotateX(-360deg) rotateY(360deg); } 50% { transform: rotateX(-180deg) rotateY(360deg); } 60% { transform: rotateX(90deg) rotateY(180deg); } 70% { transform: rotateX(0) rotateY(180deg); } 80% { transform: rotateX(90deg) rotateY(90deg); } 90% { transform: rotateX(90deg) rotateY(0); } 100% { transform: rotateX(0) rotateY(0); } } .container{ animation: rotate-frame 30s linear infinite; } </style>
css的选择器可以分为三大类,即id选择器、class选择器、标签选择器。它们之间可以有多种组合,有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等
感谢您能读到这里,小编希望您对“如何使用Css实现空间旋转”这一关键问题有了从实践层面最深刻的体会,具体使用情况还需要大家自己动手实践使用过才能领会,如果想阅读更多相关内容的文章,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。