1.3D坐标,其中黑框相当于屏幕,z轴正方形指向屏幕前方,y轴指向屏幕上方,x轴正向指向屏幕右方,三轴以屏幕中心为原点
2.perspective
perspective的值相当于从屏幕的侧面看,屏幕距离z轴正向(前方)的距离。
perspectiveOrigin: 可理解为视点的xy坐标,perspective则是z坐标,三者可以再三维中确定Z视点的唯一位置。(视点Z即相当于你的眼睛所在的位置)
3.perspective属性的两种书写
一种用在舞台元素上(动画元素们的共同父辈元素);第二种就是用在当前动画元素上,与transform的其他属性写在一起。如下代码示例:
//视点Z是 以 子元素的共同父元素 stage 为整体的
.stage {
perspective: 600px;
}
//每个元素都有一个自己的视点
#stage .box {
transform: perspective(600px) rotateY(45deg);
}