变换

平面转换

改变盒子在平面内的形态（位移、旋转、缩放）

2D转换

注意：注意层叠性

位移

1transform: translate(水平移动距离,垂直移动距离);
2
3取值：
4	像素单位数值
5	百分比（参照物为盒子自身尺寸）
6
7注意：
8	X轴正向为右,Y轴正向为下
9	配合transition过渡属性使用
10	移动后,保留原位置
11	正常情况下,百分比是参照父元素的大小,但是在位移属性中设置百分比是参照自身大小。
12
13技巧：
14	translate()如果只给出一个值,表示X轴方向移动
15	单独设置某个方向的移动距离：translateX() 或translateY()

扩展:

实现translate快速实现绝对定位的元素居中效果

方法一：

1position: absolute;
2height: 100px;
3width: 200px;
4left: 50%;
5top: 50%;
6margin-left: -100px;
7margin-top: -50px;

方法二：

1position: absolute;
2height: 100px;
3width: 200px;
4left: 50%;
5top: 50%;
6transform: translate(-50%, -50%);

旋转

1transform: rotate(角度);
2
3取值：
4	正值：顺时针旋转
5	负值：逆时针旋转
6
7左手法则判断旋转方向：左手握住旋转轴,大拇指指向正值方向,其余四指的弯曲方向为旋转正值方向,反之为旋转负值方向。
8
9注意：
10	角度单位是deg

扩展：

旋转中心：使用transform-origin属性改变转换原点,默认原点是盒子中心点。

1transform-origin: 原点水平位置 原点垂直位置;
2
3由横纵坐标两个值确定
4	0 0 左上角
5
6对谁设置就写在谁本身
7
8取值：
9	方位词（top、bottom、left、right、center）
10	像素单位数值
11	百分比（参照盒子自身尺寸计算）

旋转坐标轴（表示方向）

1rotateX() 沿着横轴
2rotateY() 沿着纵轴
3rotateZ() 沿着Z轴（默认）

旋转轴（沿着哪个边旋转）

1transform-origin: top;
2transform-origin: bottom;
3transform-origin: left;
4transform-origin: right;
5
6注意：旋转轴和旋转中心和过渡属性一样,都是写在变换元素本身

多重转换

1transform: translate() rotate();
2
3注意：
4	先旋转再位移,旋转时坐标轴跟着旋转。

缩放

1transform: scale(X轴缩放倍数,Y轴缩放倍数);
2
3注意：
4	一般情况下,只为scale设置一个值,表示X轴和Y轴等比例缩放
5	transform: scale(缩放倍数);

渐变

1background-image: linear-gradient (
2	颜色1,
3	颜色2	
4);
5
6实际应用：linear-gradient (transparent, rgba(0, 0, 0, .6));
7
8使用background-image属性实现渐变背景效果
9	渐变是多个颜色逐渐变化的视觉效果
10	一般用于设置盒子的背景

空间转换

空间转换也叫3D转换

使用transform属性实现元素在空间内的位移、旋转、缩放等效果。

位移

1transform: translate3d(x,y,z);
2transform: translateX(值);  //右正左负
3transform: translateY(值);  //下正上负
4transform: translateZ(值);  //前正后负
5
6取值（正负均可）：
7	像素单位数值
8	百分比

透视

1perspective: 值;
2
3取值：
4	像素单位数值,数值一般在800-1200。
5
6注意：
7	属性（添加给变换元素的父级）
8	透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离。
9	使用perspective属性实现透视效果,近大远小。

旋转

1transform: rotate3d(x,y,z,角度度数)
2
3注意:
4	用于设置自定义旋转轴的位置及旋转的角度
5	x,y,z取值为0-1之间的数字
6
7transform: rotateZ(角度);  //沿中心点转,正顺负逆
8transform: rotateX(角度);  //沿x轴转,正顺负逆
9transform: rotateY(角度);  //沿y轴转。正逆负顺
10
11注意：
12	transform: rotateZ()围绕中心点旋转,效果和transform: rotate()一样。

3D立体呈现

1transform-style: flat | preserve-3d;
2
3flat （默认值）子元素不开启3D立体空间
4preserve-3d 子元素开启3d立体空间
5
6控制子元素是否开启三维立体环境
7代码写给父级,但是影响的是子盒子
8
9实现：
10	搭配透视使用
11	
12	使子集元素处于真正的3d空间

缩放

1使用scale实现空间缩放效果
2transform: scale3d(x,y,z);
3transform: scaleX(倍数);
4transform: scaleY(倍数);
5transform: scaleZ(倍数);

变换#

平面转换#

渐变#

空间转换#

变换

平面转换

渐变

空间转换