透视属性

视距 perspective

视距，即透视距离，是指观察者沿着平行于z轴的视线与屏幕之间的距离。

perspective: none（默认） | <length>            // 应用于非inline元素

// perspective不可为0和负数 — 因观察者与屏幕距离为0时或在屏幕背面时是不可以观察到被透视元素的正面的
// perspective不可取百分比 — 因为百分比需要相对的元素，但z轴并没有可相对的元素尺寸

• 一般地，物体离得越远，显得越小。反映在perspective属性上，就是该属性值越大，元素的3d效果越不明显。
  • 就像离一个人很近，甚至可以看到他的毛孔；如果离一个人很远，可能只看到一个轮廓
• 设置透视perspective属性的元素就是被透视元素。一般地，该属性只能设置在变形元素的父级或祖先级。
  • 因为浏览器会为其子级的变形产生透视效果，但并不会为其自身产生透视效果。

<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元素

// perspective-origin 必须定义在设置 perspective 的元素上，即，必须设置在元素的父元素或祖先元素上。

x轴: left | right | center | <percentage> | <length>
y轴: top | bottom | center | <percentage> | <length>

// 同2D效果的变形原点