CSS3图形变换

Mr.ZhaoAbout 6 min

1. 2D变换

二维坐标系如图：

1.1 2D位移

2D 位移可以改变元素的位置，具体使用方式如下：

先给元素添加转换属性 transform
编写 transform 的具体值，相关可选值如下：
- translateX：设置水平方向位移，需指定长度值；若指定的是百分比，是参考自身宽度的百分比
- translateY：设置垂直方向位移，需指定长度值；若指定的是百分比，是参考自身高度的百分比
- translate：一个值代表水平方向，两个值代表水平和垂直方向
注意点：
1. 位移与相对定位很相似，都不脱离文档流，不会影响到其它元素
2. 与相对定位的区别：相对定位的百分比值，参考的是其父元素；定位的百分比值，参考的是其自身
3. 浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高
4. transform 可以链式编写，例如：transform: translateX(30px) translateY(40px);
5. 位移对行内元素无效
6. 位移配合定位，可实现元素水平垂直居中
  Demo 演示
  <div class="box"></div>
  .box { width:50px; height:50px; background-color:pink; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

1.2 2D缩放

2D 缩放是指：让元素放大或缩小，具体使用方式如下：

先给元素添加转换属性 transform
编写 transform 的具体值，相关可选值如下：
- scaleX：设置水平方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小于 1 缩小
- scaleY：设置垂直方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小于 1 缩小
- scale：同时设置水平方向、垂直方向的缩放比例，一个值代表同时设置水平和垂直缩放；两个值分别代表：水平缩放、垂直缩放
注意点：
1. scale 的值，是支持写负数的，但几乎不用，因为容易让人产生误解
2. 借助缩放，可实现小于 12px 的文字

1.3 2D旋转

2D 旋转是指：让元素在二维平面内，顺时针旋转或逆时针旋转，具体使用方式如下：

先给元素添加转换属性 transform
编写 transform 的具体值，相关可选值如下：
- rotate：设置旋转角度，需指定一个角度值 ( deg )，正值顺时针，负值逆时针
注意： rotateZ(20deg) 相当于 rotate(20deg) ，当然到了 3D 变换的时候，还能写： rotate(x,x,x)

1.4 2D扭曲

2D 扭曲是指：让元素在二维平面内被“拉扯”，进而“走形”，实际开发几乎不用，了解即可，具体使用方式如下：

先给元素添加转换属性 transform
编写 transform 的具体值，相关可选值如下：
- skewX：设置元素在水平方向扭曲，值为角度值，会将元素的左上角、右下角拉扯
- skewY：设置元素在垂直方向扭曲，值为角度值，会将元素的左上角、右下角拉扯
- skew：一个值代表 skewX ，两个值分别代表： skewX 、 skewY

1.5 多重变换

多个变换，可以同时使用一个 transform 来编写

transform: translate(-50%, -50%) rotate(45deg);

1.6 变换原点

元素变换时，默认的原点是元素的中心，使用 transform-origin 可以设置变换的原点

修改变换原点对位移没有影响，对旋转和缩放会产生影响

如果提供两个值，第一个用于横坐标，第二个用于纵坐标

如果只提供一个，若是像素值，表示横坐标，纵坐标取 50% ；若是关键词，则另一个坐标取 50%

/* 变换原点在元素的中心位置，百分比是相对于自身。—— 默认值 */
transform-origin: 50% 50%;
/* 变换原点在元素的左上角 */
transform-origin: left top;
/* 变换原点距离元素左上角 50px 50px 的位置 */
transform-origin: 50px 50px;
/* 只写一个值的时候，第二个值默认为 50% */
transform-origin: 0;

2. 3D变换

2.1 开启3D空间

重要原则：元素进行 3D 变换的首要操作：父元素必须开启 3D 空间！

使用 transform-style 开启 3D 空间，可选值如下：

flat ：让子元素位于此元素的二维平面内（ 2D 空间）—— 默认值
preserve-3d ：让子元素位于此元素的三维空间内（ 3D 空间）

2.2 设置景深

何为景深？—— 指定观察者与 z=0 平面的距离，能让发生 3D 变换的元素，产生透视效果，看来更加立体

使用 perspective 设置景深，可选值如下：

none ：不指定透视 ——（默认值）
长度值：指定观察者距离 z=0 平面的距离，不允许负值

注意： perspective 设置给发生 3D 变换元素的父元素！

2.3 透视点位置

所谓透视点位置，就是观察者位置；默认的透视点在元素的中心

使用 perspective-origin 设置观察者位置（透视点的位置）

/* 相对坐标轴往右偏移400px，往下偏移300px（相当于人蹲下300像素，然后向右移动400像素看元素） */
perspective-origin: 400px 300px;

注意：通常情况下，我们不需要调整透视点位置

2.4 3D位移

3D 位移是在 2D 位移的基础上，可以让元素沿 z 轴位移，具体使用方式如下：

先给元素添加转换属性 transform
编写 transform 的具体值， 3D 相关可选值如下：
- translateZ：设置 z 轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比
- translate3d：第1个参数对应 x 轴，第2个参数对应 y 轴，第3个参数对应 z 轴，且均不能省略

2.5 3D旋转

3D 旋转是在 2D 旋转的基础上，可以让元素沿 x 轴和 y 轴旋转，具体使用方式如下：

先给元素添加转换属性 transform
编写 transform 的具体值， 3D 相关可选值如下：
- rotateX：设置 x 轴旋转角度，需指定一个角度值 ( deg )，面对 x 轴正方向：正值顺时针，负值逆时针
- rotateY：设置 y 轴旋转角度，需指定一个角度值 ( deg )，面对 y 轴正方向：正值顺时针，负值逆时针
- rotate3d：前 3 个参数分别表示坐标轴： x , y , z ，第 4 个参数表示旋转的角度，参数不允许省略。例如：transform: rotate3d (1,1,1,30deg) ，意思是： x 、 y 、 z 分别旋转 30 度

2.6 3D缩放

3D 缩放是在 2D 缩放的基础上，可以让元素沿 z 轴缩放，具体使用方式如下：

先给元素添加转换属性 transform
编写 transform 的具体值， 3D 相关可选值如下：
- scaleZ：设置 z 轴方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小于 1 缩小
- scale3d：第1个参数对应 x 轴，第2个参数对应 y 轴，第3个参数对应 z 轴，参数不允许省略

2.7 多重变换

多个变换，可以同时使用一个 transform 来编写

transform: translateZ(100px) scaleZ(3) rotateY(40deg);

注意点：多重变换时，建议最后旋转

2.8 背部可见性

使用 backface-visibility 指定元素背面，在面向用户时是否可见，常用值如下：

visible：指定元素背面可见，允许显示正面的镜像。—— 默认值
hidden：指定元素背面不可见

注意： backface-visibility 需要加在发生 3D 变换元素的自身上

CSS3图形变换

# 1. 2D变换

# 1.1 2D位移

# 1.2 2D缩放

# 1.3 2D旋转

# 1.4 2D扭曲

# 1.5 多重变换

# 1.6 变换原点

# 2. 3D变换

# 2.1 开启3D空间

# 2.2 设置景深

# 2.3 透视点位置

# 2.4 3D位移

# 2.5 3D旋转

# 2.6 3D缩放

# 2.7 多重变换

# 2.8 背部可见性