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

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

            -moz-transform-style: preserve-3d;   
            -ms-transform-style: preserve-3d;   
            transform-style: preserve-3d;   
            transform-origin:100px 100px 00px;   
            position: relative;   
            transform: rotatex(0deg) rotatey(0deg) rotatez(0deg)scale3d(0.7,0.7,0.7);   
        }   
        .box span{   
            transition: all 1s linear;   
  
        }   
        span{   
            display: block;   
            position: absolute;   
            width: 200px;   
            height: 200px;   
            box-sizing: border-box;   
            border:1px solid #999;   
            /*opacity: 0.7;*/  
            text-align: center;   
            line-height: 200px;   
            font-size: 60px;   
            font-weight: 700;   
            border-radius: 12%;   
  
        }   
        .box span:nth-child(1){   
            background-color: deepskyblue;   
            transform-origin: left;   
            transform: rotatey(-90deg) translatex(-100px);//左