[分享]css3怎么让一个正方体无限旋转

.cube{ width: 200px; height: 200px; position: relative; margin: 200px auto; transform-style: preserve-3d; animation: rotate infinite linear; -webkit-animation: rotate infinite linear; } .cube div { position: absolute; width: inherit; height: inherit; } .cube .front { transform: rotateY(0deg) translateZ(100px); background: #f00; } .cube .back { transform: rotateX(180deg) translateZ(100px); background: #00f; } .cube .top { transform: rotateX(90deg) translateZ(100px); background: #0f0; } .cube .bottom { transform: rotateX(-90deg) translateZ(100px); background: #000; } .cube .left { transform: rotateY(-90deg) translateZ(100px); background: #fff; } .cube .right { transform: rotateY(90deg) translateZ(100px); background: #ff0; } @keyframes rotate{ from{ transform: rotateY(0deg); } to{ transform: rotateY(360deg); } } @-webkit-keyframes rotate{ from{ -webkit-transform: rotateY(0deg); } to{ -webkit-transform: rotateY(360deg); } }

这是一个使用CSS3实现无限旋转的正方体：

 <div class="cube">
        <div class="front"></div>
        <div class="back"></div>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div> 

给定一个CSS类名为“cube”的div，设置宽高和位置，为了使正方体旋转需要设置transform-style: preserve-3d;

使用div嵌套实现正方体的六个面，分别设置对应的背景色和旋转变换。

最后使用animation和keyframes动画属性实现无限旋转，控制transform:rotateY()属性值从0度到360度。