1. perspective()函数与perspective属性
在3D变形中,除了perspective
属性可以激活一个3D空间外,在3D变形的函数中的perspective()
也可以激活3D空间。
不同的地方是:perspective
用在舞台元素上(变形元素们共同的父元素);perspective()
就是用在当前变形元素上,并且可以与其他的transform
函数一起使用。例如,可以把:
.stage {
perspective: 600px;
}
写成:
.stage .box {
transform: perspective(600px);
}
perspective 属性和perspective()函数功能一样,但其取值以及运用的对象有所不同。
perspective属性可以取值为none或长度值;而perspective()函数取值只能大于0,如果取值为0或比0小的值,将无法激活3D空间;
perspective属性用于变形对象父元素;而perspective()函数用于变形对象自身,并和transform其他函数一起使用。
2. perspective-origin
perspective-origin
属性必须定义父元素上。通常perspective-origin
属性本身不做任何事情,他必须被定义在设置perspective
属性的元素上。换句话说,perspective-origin
属性需要与perspective
属性结合起来使用,以便将视点移至元素的中心以外的位置。
3. backface-visibility属性
backface-visibility
属性决定元素旋转背面是否可见。对于未旋转的元素,该元素的正面面向观看者。当其Y轴旋转约180度时会导致元素的背面面对观众。
backface-visibility: visible | hidden
visible: 默认值,反面可见
hidden:反面不可见
一个元素