Shulou(Shulou.com)06/02 Report--

本文将为大家详细介绍"如何使用Css实现空间旋转"，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇"如何使用Css实现空间旋转"能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

先建出来六个div然后再依次给它们设置样式

再来看它们的样式表

.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;}css的选择器有哪些css的选择器可以分为三大类，即id选择器、class选择器、标签选择器。它们之间可以有多种组合，有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等

感谢您能读到这里，小编希望您对"如何使用Css实现空间旋转"这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注行业资讯频道!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.