css特殊转换之2D与3D转换

目录

一.css转换的效果

二.2D转换

1.translate()

 2.rotate()

3.scale()

4. skew()

 5.matrix()

三.3D转换

1.rotateX()

 2.rotateY()

3.rotateZ()

 4.其他

---

一.css转换的效果

转换使我们的元素发生大小、位置、形状发生一些改变，分为 2D 和 3D 转换

二.2D转换

需要通过transform属性进行设置。

translate()	方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数） ，注意： 是一种平移效果
rotate()	方法根据给定的角度顺时针或逆时针旋转元素 , 可以取负值，元素进行逆时针旋转
scale()	方法增加或减少元素的大小（根据给定的宽度和高度参数）
scaleX()	方法增加或减少元素的宽度
scaleY()	方法增加或减少元素的高度
skew()	方法使元素沿 X 和 Y 轴倾斜给定角度
skewX()	方法使元素沿 X 轴倾斜给定角度
skewY()	方法使元素沿 Y 轴倾斜给定角度
matrix()	方法把所有 2D 变换方法组合为一个。 参数如下（要按照一定的顺序）： matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

1.translate()

 2.rotate()

3.scale()

4. skew()

 5.matrix()

三.3D转换

通过 CSS transform 属性

1.rotateX()

rotateX() 方法使元素绕其 X 轴旋转给定角度：

 2.rotateY()

rotateY() 方法使元素绕其 Y 轴旋转给定角度：

3.rotateZ()

rotateZ() 方法使元素绕其 Z 轴旋转给定角度

 

 4.其他

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