css3变形中几个重要点

来源：互联网发布：网络协议基础知识编辑：程序博客网时间：2024/05/18 20:32

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：反面不可见

一个元素

0 0