如何通过CSS3实现旋转立方体(2)-木庄网络博客

2022-03-27 18:24:18 PHP中文网 JavaScript 百度已收录

.one{
     transform: rotateY(0deg) translateZ(100px);
     background-color:rgb(255,118,19);
 }
 .two{
     transform: rotateY(180deg) translateZ(100px);
      background-color:rgb(231,78,72);
 }
 .three{
     transform: rotateX(90deg) translateZ(100px);
      background-color: rgb(75,165,165);
 }
 .four{
     transform: rotateX(-90deg) translateZ(100px);
      background-color:rgb(129,182,62);
 }
 .five{
     transform: rotateY(90deg) translateZ(100px);
     background-color: rgb(255,118,19);
 }
 .six{
     transform: rotateY(-90deg) translateZ(100px);
      background-color:rgb(244,208,114);
 }

这样我们的立方体就做好了，当鼠标移上去的时候就会发生旋转

.box:hover{
                transform: rotateX(360deg) rotateY(360deg);
                -webkit-transform: rotateX(360deg) rotateY(360deg);
            }

效果图：