CSS变形（2）

前文：CSS变形（1）

变形相关属性

1、设置变形中心点 

transform-origin  属性值可以是百分比，px...等具体的值，也可以是top  bottom  left  right等关键词

transform-origin: left top;

2、3d透视效果 

近大远小  值越小效果越明显

perspective  （作用在父级元素上）

/*示例*/
body {
  perspective: 200px;
}

div {
  transform: rotateX(0deg);  /*修改角度值观察效果*/
}

3、 3d嵌套效果

作用：在3d空间正确呈现元素遮挡等嵌套关系

transform-style   (作用在父级元素上) 

flat不保留子元素的3d位置 

preserve-3d子元素保留3d位置

4、3d背面是否可见

backface-visibility  （作用在具体元素身上）  

hidden  背面不可见 

visible  背面可见