CSS 2D、3D变换属性（仅供参考）

了解相关单词

transform ：变换、转换、变形
origin ：起源、源头
perspective ：规定3D元素的透视效果
translate：移动
scale ：缩放
rotate：旋转
skew：斜切/倾斜

CSS 转换属性

下表列出了所有 2D变换属性：

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。

CSS 转换transforms允许您移动、旋转、缩放和倾斜元素。

通过使用 CSS transform 属性，您可以利用以下2D 转换方法：

translate(x,y) 定义 2D 转换，(沿着 X 和 Y 轴移动元素。)
translateX(n) 定义 2D 转换，(沿着 X 轴移动元素。)
translateY(n) 定义 2D 转换，(沿着 Y 轴移动元素。)

scale(x,y) 定义 2D 缩放转换，(改变元素的宽度和高度。)
scaleX(n) 定义 2D 缩放转换，(改变元素的宽度。)
scaleY(n) 定义 2D 缩放转换，(改变元素的高度。)

skew(x-angle,y-angle) 定义 2D 倾斜转换，(沿着 X 和 Y 轴。)
skewX(angle) 定义 2D 倾斜转换，(沿着 X 轴。)
skewY(angle) 定义 2D 倾斜转换，(沿着 Y 轴。)

rotate(angle) 定义 2D 旋转，(在参数中规定角度。)

示例：

1.translate 移动变换
 .c1:hover .box1 {
            transform: translateX(-100px);
            transform: translatey(-100px);
            transform: translatez(69px);
        }

2.scale 缩放变换 
 .c3:hover .box3 {
            transform: scalex(3);
            transform: scaley(3);
            transform: scalez(2) translateZ(20px);
            /* scalex：沿x轴缩放元素 */
            /* scaley：沿y轴缩放元素 */
            /* scalez:缩放z轴的（长度） */

        }

3.skewx 斜切
 .c5:hover .box5 {
            transform: skewx(40deg);
            transform: skewy(40deg);
            transform: skewZ(40deg);
        }

4.rotatex 旋转
.c2:hover .box2 {
            transform: rotatex(45deg);
            /* transform: rotatey(45deg);
            transform: rotatez(45deg); */
        }

CSS 3D 转换属性

下表列出了所有变换属性：

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

变换属性

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

translate（）函数

定义：translate（）函数用于对元素进行移动变换。

CSS 3D 转换方法

语法：

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 **旋转v。
rotateZ(angle)  定义沿 Z 轴的 3D **旋转**。
------------------------------------------------------

perspective(n) 定义 3D 转换元素的透视视图

perspective(透视)

定义：定义z轴原点到屏幕的距离（z轴是垂直屏幕的轴）

特征：大透视小变换；小透视大变化; ( 坐标原点距离屏幕的距离 )

/* 透视效果越小500px，放得越大 | 透视效果越大1000px，放得越小 */

属性值：

perspective:none|px|em
- none：不透视
- px：像素
- em：相对长度单位