本文共 1179 字，大约阅读时间需要 3 分钟。

perspective

设置元素被查看位置的视图------视距

perspective-origin:x y

设置观察的视角 x为横向 y为纵向

例子：

1.盒子的四边各用一个div表示

    
   
        
    
     1
    
        
    
     2
    
        
    
     3
    
        
    
     4
    
    
   

1)首先将整个正方体调到页面中心(Scroll绝对定位 父容器body相对定位 设置scroll的left、right、top、bottom为0,再设置margin:auto即可)

2)设置四个div也为绝对定位 top和left皆为0 并且width和height都和父容器scroll相同 使得五个div都重合在页面中间

3)接下来对四个div进行旋转平移调整(相对于scroll)

transform:translateZ(-width/2);        transform:translateZ(width/2);

左右两个div先进行旋转90度后 再进行Z轴方向的平移(旋转90度之后Z轴为页面水平方向)自身宽度的一般

transform:rotate(90deg) translateZ(width/2);        transform:rotate(90deg) translateZ(-width/2);

接下来用animation加动画

用@keyframes定义动画        @keyframes rota{            from{transform:rotateY(0deg);}            to{transform:rotateY(360deg);}        }    延y轴旋转360度

对scroll调用该动画并且设置相关属性

animation-name:rota;                        animation-timing-function:linear;                        animation-duration:.6s;                        animation-fill-mode:forwards;

再用transform-style加入3d显示

transform-style:preserve-3d;

这样一个旋转的立方体就做好了 通过改变perspective属性可以让它显示的更加逼真