CSS3 3D转换

perspective

（1）perspective值越大，产生3D变换的时候会感觉距物体越远（不可为负数或者0，如果设置为0或者负数，那么就相当于人观察一个物体眼睛贴上去或者陷进去，就不会感觉到变化了）（也不能为百分比）

（2）一般为父元素设置perspective属性，设置完之后，如果其子元素设置了3D转换，那么就可以显示出来

具体效果看下面的rotate 3D变换

1，rotate

 

改变rotateX的值

改变rotateY的值

改变rotateZ的值

语法

rotate3d(x, y, z, angle) 

x 表示旋转轴x坐标方向上的矢量（可以为小数）

y 表示旋转轴x坐标方向上的矢量（可以为小数）

z 表示旋转轴x坐标方向上的矢量（可以为小数）

angle旋转角度，允许负值

----------------------------------------------------------------

2，perspective-origin属性

观察位置：

语法：

perspective-origin: x, y;

默认值：perspective-origin: center, center;

x可填：left | center | right | 0% | 50% 100% | n px

y可填：top | center | bottom | 0% | 50% 100% | n px

在填像素的时候，相当的是 在x为left | 0% 和y为top | 0% 的位置

只有一个值的时候，默认第二个值为center

我就不一一试过去了

3，translate3d

设置上半透明

4，transform-origin

设置需要3D变换的元素的位置

x轴: left | center | right | |

y轴: top | center | bottom | |

z轴:

太多了  可以自己试一下

---------------------------------------------------------------

3D骰子

  
  
  
  
  


  

    
bottom
    
left
    
top
    
front
    
behind
    
right
  

 

----------------------------------------------------------------

参考文章：

https://segmentfault.com/q/1010000007466275

https://www.cnblogs.com/xiaohuochai/p/5351477.html