工作中一直做普通的网页，今天浏览到一篇做3d旋转的盒子的效果，感觉挺好玩，于是跟着教程练了练，在此做个记录

    
    
     
        
      
       1
      
        
      
       2
      
        
      
       3
      
        
      
       4
      
        
      
       5
      
        
      
       6
      
    
     
    

camera用来控制景深（perspective）

.camera {    width: 200px;    height: 200px;    perspective-origin: center;    perspective: 200px;}.box {    transform-style:preserve-3d;    position:relative;    width:100%;    height:100%;    border:1px dashed #000;}.face {    width: 100px;    height: 100px;    background: red;    display: flex;    align-items: center;    justify-content: center;    font-size: 38px;    color: white;    position: absolute;}.face1 {    background: #3498db;    transform:translateX(50px) translateY(50px) translateZ(50px);}.face2 {    background: #9b59b6;    transform-origin: 0 0;  //设置transform的基准点    transform:translateX(150px) translateY(50px) translateZ(50px) rotateY(90deg);}//transform是有顺序的，先旋转再平移和先平移再旋转的效果可能不同.face3 {    background: #f1c40f;    transform-origin: 0 0;    transform:translateX(50px) translateY(50px) translateZ(50px) rotateX(-90deg);}.face4 {    background: #7f8c8d;    transform-origin: 0 0;    transform:translateX(50px) translateY(150px) translateZ(50px) rotateX(-90deg);}.face5 {    background: #2ecc71;    transform-origin: 100% 100%;    transform: translateX(-50%) translateY(50px) translateZ(50px) rotateY(-90deg);}.face6 {    background: #34495e;    transform: translateX(50px) translateY(50px)  translateZ(-50px) rotateY(-180deg);}//做一个旋转的动画，看看6个面写的是否正确.box {    animation: rotate 4s linear infinite ;}@keyframes rotate{     0%{         -webkit-transform:rotateY(0) rotateX(0);     }     50%{         -webkit-transform:rotateY(-359.9deg) rotateX(0);     }     100% {         -webkit-transform:rotateY(-359.9deg) rotateX(-359.9deg);     }}

如果是手机观看的话，增加陀螺仪效果显得更nice

var box = document.querySelectorAll('.box');window.addEventListener('deviceorientation', function(event) {    var alpha = event.alpha,        beta = event.beta,        gamma = event.gamma;    box[0].style.webkitTransform = 'rotateX(' + beta + 'deg) rotateY(' + gamma + 'deg) rotateZ(' + alpha + 'deg)';    box[0].style.transform = 'rotateX(' + beta + 'deg) rotateY(' + gamma + 'deg) rotateZ(' + alpha + 'deg)';    box[0].style.mozTransform = 'rotateX(' + beta + 'deg) rotateY(' + gamma + 'deg) rotateZ(' + alpha + 'deg)';}, false);

附上作者忠告：