CSS3学习，常用常记（2D转换（4），3D转换（2））

CSS3 转换

CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。

它是如何工作？

转换的效果是让某个元素改变形状，大小和位置。

2D 转换

translate() 方法

左上角为原点，从左到右是X轴正方向，从上到下是Y轴正方向，从当前元素位置移动。

div{
    transform: translate(50px,100px);
    -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

translate值（50px，100px）是向右边移动50个像素，并向底部移动100像素。

rotate() 方法

在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

div#div2{
	transform:rotate(30deg);
	-ms-transform:rotate(30deg); /* IE 9 */
	-webkit-transform:rotate(30deg); /* Safari and Chrome */
}

rotate值（30deg）元素顺时针旋转30度。

scale() 方法

该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

div {
    margin: 150px;
    width: 200px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    -ms-transform: scale(2,3); /* IE 9 */
    -webkit-transform: scale(2,3); /* Safari */
    transform: scale(2,3); /* 标准语法 */
}

scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

skew() 方法

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

• skewX(<angle>);表示Y轴顺时针倾斜。
• skewY(<angle>);表示X轴逆时针倾斜。

div#div2{
	transform:skew(30deg,20deg);
	-ms-transform:skew(30deg,20deg); /* IE 9 */
	-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
}

matrix() 方法

matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

利用matrix()方法旋转div元素30°（懵逼）

3D 转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

rotateX() 方法

围绕其在一个给定度数向前旋转的元素。

div#div2{
	transform:rotateX(180deg);
	-webkit-transform:rotateX(180deg); /* Safari and Chrome */
}

rotateY() 方法

围绕其在一个给定度数向右旋转的元素。

div#div2{
	transform:rotateY(130deg);
	-webkit-transform:rotateY(130deg); /* Safari and Chrome */
}

转换属性

下表列出了所有的转换属性：

属性	描述	CSS
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	允许你改变被转换元素的位置。	3
transform-style	规定被嵌套元素如何在 3D 空间中显示。	3
perspective	规定 3D 元素的透视效果。	3
perspective-origin	规定 3D 元素的底部位置。	3
backface-visibility	定义元素在不面对屏幕时是否可见。	3

3D 转换方法

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。