CSS3--2D/3D转换

写在前面：很多内容都是对w3cschool教程的复述，深入学习建议w3cschool - 编程狮，随时随地学编程

---

一、2D转换

即在二维平面中对元素进行转换，包括旋转、缩放、平移和倾斜。

1 平移translate()

这个方法含有两个参数，分别为x轴和y轴移动距离，坐标轴以左上角为原点，参数类型为数字+单位。

其中正值表示向右向下平移，负值向左向上平移。

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

2 旋转rotate()

需要给定一个参数，即旋转的角度，正值为逆时针旋转，负值为顺时针。默认绕中心点旋转。

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

 我们可以用transform-origin属性定义旋转的中心点。

参数的值可以是数值+单位、百分比以及位置单词（left、right、center、top、bottom）。

div
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}

3 缩放scale()

含有两个参数，为宽度和高度，参数不包含单位，分别代表宽高的缩放程度。

下面的含义就是宽度变成原来的两倍，高度变成原来的四倍。

div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
} 

4 倾斜skew()

这里的倾斜是指元素边的倾斜，边界线段的中点不变进行倾斜，与x轴或y轴交点的夹角角度为设定的参数值。其中第一个参数控制高与x轴的夹角大小，第二个控制宽与y轴的夹角。

含两个参数：向x轴和向y轴倾斜的角度。可以只写一个参数，此时默认第二个为零。

同样参数可以为负数。

当任一角度为90度时元素将不可见（但仍占位）。

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

5 方法合并matrix()

该方法包含六个参数，合并了前面提及的四种2D转换。

实际是一个3*3矩阵，css3中的转换本质上都是应用martix()方法实现的。

具体原理可以阅读CSS3 transform中的Matrix(矩阵)讲解_定栓的博客-CSDN博客_css3 matrix

二、3D转换

 2D转换是基于x轴和y轴进行的图形转换，3D在此基础上新增的z轴。

效果包含平移、旋转、缩放和透视。

函数	描述
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 转换元素的透视视图。