css3 transform及原生js实现鼠标拖动3D立方体旋转

2020-05-01 09:52:50易采站长站整理

        }   
        .box span:nth-child(2){   
            background-color: red;   
            transform-origin: rightright;   
            transform: rotatey(90deg) translatex(100px) ;//右   
  
        }   
  
        .box span:nth-child(3){   
            background-color: green;   
            transform-origin: top;   
            transform: rotatex(90deg) translatey(-100px) ;//上   
  
        }   
        .box span:nth-child(4){   
            background-color: #6633FF;   
            transform-origin: bottombottom;   
            transform: rotatex(-90deg) translatey(100px);//下   
        }   
        .box span:nth-child(5){   
            background-color: gold;   
            transform: translatez(-100px);//后   
        }   
        .box span:nth-child(6){   
  
            background-color: #122b40;   
            transform: translatez(100px);//前   
        }   
        .box:hover span{   
  
            opacity: 0.3;   
        }   
        .box:hover{   
            animation-play-state:paused;//设置动画暂停