【2】设置透视perspective属性的元素就是被透视元素。一般地，该属性只能设置在变形元素的父级或祖先级。因为浏览器会为其子级的变形产生透视效果，但并不会为其自身产生透视效果
CSS Code复制内容到剪贴板
<!– 在本身元素上设置透视无效果 –>
<div style="float:left;margin-right: 10px;border:2px solid gray;">
<div style="perspective: 200px;width: 100px;height: 100px;border:1px solid black;background-color: pink;transform: rotateX(45deg);"></div>
</div>
<!– 在父级元素上设置透视有效果 –>
<div style="perspective: 200px; float:left;margin-right: 10px;border:2px solid gray;">
<div style="width: 100px;height: 100px;border:1px solid black;background-color: lightblue;transform: rotateX(45deg);"></div>
</div>
透视原点
透视原点perspective-origin是指观察者的位置，一般地，观察者位于与屏幕平行的另一个平面上，观察者始终是与屏幕垂直的。观察者的活动区域是被观察元素的盒模型区域
perspective-origin
值: x轴 y轴
初始值: 50% 50%
应用于: 非inline元素(包括block、inline-block、table、table-cell等)
继承性: 无
x轴: left | right | center | <percentage> | <length>y轴: top | bottom | center | <percentage> | <length>【1】关键字
x轴 left: 0% center: 50% right: 100%y轴 top: 0% center: 50% bottom: 100%
【2】数值
x轴数值表示在x轴上离0点(元素边框外侧左上角)的偏移量；y轴数值表示在y轴上离0点的偏移量
【3】百分比
其中x轴的百分比相对于被透视元素的宽度和(width+横向padding+横向border)，而y轴的百分比相对于被透视元素的高度和(height+纵向padding+纵向border)
【4】单个值
当只有一个值时，默认第二个值为center
[注意]perspective-origin必须定义在设置perspective的元素上，也就是说必须设置在元素的父元素或祖先元素上变形函数
介绍完透视之后，接下来详细介绍关于变形3d的变形函数和变形原点。上篇博文详细介绍了2d变形函数。而3d变形函数也类似，包括位移、旋转和缩放，没有倾斜。
[注意]倾斜skew()是二维变形，不能在三维空间变形，元素可能会在x轴和y轴倾斜，但不能在z轴倾斜矩阵matrix3d
