CSS3骚样式补充

一、transform-origin 属性

设置旋转元素的基点位置，2D 转换元素能够改变元素 x 和 y 轴，3D 转换元素还能改变其 Z 轴。

必须与 transform 属性一同使用，不然不会有任何效果。

 

1、x-axis（以y轴为旋转中心时，元素（y轴）在x轴上的位置）

定义视图被置于 X 轴的何处。可能的值：

• left
• center
• right
• length
• %

2、y-axis（以x轴为旋转中心时，元素（x轴）在y轴上的位置）

定义视图被置于 Y 轴的何处。可能的值：

• top
• center
• bottom
• length
• %

3、z-axis（以z轴为旋转中心，元素在z轴上的位置）

定义视图被置于 Z 轴的何处。可能的值：

• length

注：length为正负px，%就是百分比。

4、默认值与解释

默认值为
　　transform-origin:50% 50% 0;

即　　

　　transform-origin:x-50%;

　　transform-origin:y-50%;

　　transform-origin:x-0px;

也等同于

　　transform-origin:center center 0px;

第一个值为X，第二个值为Y,第三个为Z。

假设有一个宽高都等于100px的元素，定义它有x、y、z三条轴，x、y轴把元素平分为50*50四份，相当于一个“田”字，中间的“十”字为x、y轴，这就是默认值。

x值为50%(center)，意为当元素要绕着y轴旋转时，y轴在x轴的正中间；如果x值小于0%（为负），y轴会在元素的左侧，如果x值大于100%，y轴会在元素的右侧。

y值为50%(center)，意为当元素要绕着x轴旋转时，x轴在y轴的正中间；如果y值小于0%（为负），x轴会在元素的上面，如果y值大于100%，x轴会在元素的下面。

z值为0px，意为元素在当前的2D位面上不做移动；如果为负，意为在3D空间向里移动，如果大于0，意为在3D空间向外移动。

注：三条轴就像元素旋转时的参照中心，中心可以在元素里面，也可以在外面。（中心在元素内，有点像地球自转，中心在元素外，开起来类似地球绕着太阳公转）。

二、transform-style 属性

规定如何在 3D 空间中呈现被嵌套的元素。

1、flat

子元素将不保留其 3D 位置。

2、preserve-3d

子元素将保留其 3D 位置。

注：

transform-style属性必须与 transform 属性一同使用。

给一个元素设置 transform属性，当transform涉及到3D，元素就会需要一个3D环境，此时就需要给元素的父元素设置transform-style：preserve-3d；。

三、perspective 属性

perspective 属性定义 3D 元素距视图的距离，只影响 3D 转换元素，当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

用法：perspective: number;（直接给数字，不给单位）元素距离视图的距离，以像素计。

　　    perspective: none;默认值。与 0 相同。不设置透视。

注：类似模拟人眼看东西时，远了会变小这样子，有点不是很懂，不过透视效果蛮好看。

四、backface-visibility 属性

定义当元素不面向屏幕时是否可见。

1、visible

背面是可见的。当元素旋转180deg，会看见元素内容的反面效果。

2、hidden

背面是不可见的。当元素旋转180deg，会什么也看不见。