变换

平面转换

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

2D转换

注意：注意层叠性

位移

css

transform: translate(水平移动距离,垂直移动距离);

取值：
	像素单位数值
	百分比（参照物为盒子自身尺寸）

注意：
	X轴正向为右，Y轴正向为下
	配合transition过渡属性使用
	移动后，保留原位置
	正常情况下，百分比是参照父元素的大小，但是在位移属性中设置百分比是参照自身大小。

技巧：
	translate()如果只给出一个值，表示X轴方向移动
	单独设置某个方向的移动距离：translateX() 或translateY()

扩展:

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

方法一：

css

position: absolute;
height: 100px;
width: 200px;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;

方法二：

css

position: absolute;
height: 100px;
width: 200px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

旋转

css

transform: rotate(角度);

取值：
	正值：顺时针旋转
	负值：逆时针旋转

左手法则判断旋转方向：左手握住旋转轴，大拇指指向正值方向，其余四指的弯曲方向为旋转正值方向，反之为旋转负值方向。

注意：
	角度单位是deg

扩展：

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

css

transform-origin: 原点水平位置 原点垂直位置;

由横纵坐标两个值确定
	0 0 左上角

对谁设置就写在谁本身

取值：
	方位词（top、bottom、left、right、center）
	像素单位数值
	百分比（参照盒子自身尺寸计算）

旋转坐标轴（表示方向）

css

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

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

css

transform-origin: top;
transform-origin: bottom;
transform-origin: left;
transform-origin: right;

注意：旋转轴和旋转中心和过渡属性一样，都是写在变换元素本身

多重转换

css

transform: translate() rotate();

注意：
	先旋转再位移，旋转时坐标轴跟着旋转。

缩放

css

transform: scale(X轴缩放倍数,Y轴缩放倍数);

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

渐变

css

background-image: linear-gradient (
	颜色1,
	颜色2	
);

实际应用：linear-gradient (transparent, rgba(0, 0, 0, .6));

使用background-image属性实现渐变背景效果
	渐变是多个颜色逐渐变化的视觉效果
	一般用于设置盒子的背景

空间转换

空间转换也叫3D转换

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

位移

css

transform: translate3d(x,y,z);
transform: translateX(值);  //右正左负
transform: translateY(值);  //下正上负
transform: translateZ(值);  //前正后负

取值（正负均可）：
	像素单位数值
	百分比

透视

css

perspective: 值;

取值：
	像素单位数值，数值一般在800-1200。

注意：
	属性（添加给变换元素的父级）
	透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
	使用perspective属性实现透视效果，近大远小。

旋转

css

transform: rotate3d(x,y,z,角度度数)

注意:
	用于设置自定义旋转轴的位置及旋转的角度
	x,y,z取值为0-1之间的数字

transform: rotateZ(角度);  //沿中心点转，正顺负逆
transform: rotateX(角度);  //沿x轴转，正顺负逆
transform: rotateY(角度);  //沿y轴转。正逆负顺

注意：
	transform: rotateZ()围绕中心点旋转，效果和transform: rotate()一样。

3D立体呈现

css

transform-style: flat | preserve-3d;

flat （默认值）子元素不开启3D立体空间
preserve-3d 子元素开启3d立体空间

控制子元素是否开启三维立体环境
代码写给父级，但是影响的是子盒子

实现：
	搭配透视使用
	
	使子集元素处于真正的3d空间

缩放

css

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

变换 ​

平面转换 ​

渐变 ​

空间转换 ​

变换

平面转换

渐变

空间转换