文章目录
2D转换
转换（transform)可以理解为变形，可以实现元素的位移（translate),旋转（rotate),缩放（scale)。2D转换是改变标签在二维平面上的位置和形状的技术。
二维坐标系：以x轴向右，y轴向下为正方向
translate
内容：改变元素在页面中的位置，类似于定位。
优点：不会影响其他元素的位置.
transform:translate(x,y);
transform:translate(100px,0);
//x就是x轴上移动位置，y就是y轴上移动位置
transform:translateX(100px);
transform:translateY(100px);
取值：
（1）像素
（2）百分比：相对于自身元素的transform
Note:对行内标签没有效果
实现盒子的竖直和水平居中
transform:translate(-50%,-50%);
rotate
transform:rotate(度数）;
(1)rotate里面跟度数，单位是deg.
(2)角度为正，顺时针；角度为负，逆时针
（3）旋转的中心点默认是元素的中心点
origin
设置元素的旋转中心点
transform-origin:x y;
(1)注意后面的参数x和y用空格隔开
（2）x y默认转换的中心点是元素的中心点(50% 50%)
（3）还可以给x y设置像素或者方位名词（top bottom left right center)
缩放scale
给这个元素添加该属性之后可以控制它的放大或者缩小
transform:scale(x,y);
Note:
(1)其中x和y用逗号隔开
（2）transform：scale(1,1):宽和高都放大一倍，相当于没有放大
（3）transform: scale(2,2):宽和高都放大了俩倍
（4) transform: scale(2):只写一个参数，第二个参数则和第一个参数一样，等价于scale(2,2)
(5)transform:scale(0,5,0.5):缩放
(6)scale优势：不会影响其他的盒子，而且可以设置缩放的中心点
综合写法
1.同时使用多个转换，其格式为：transform: translate() rotate() scale() …等，其顺序会影转换的效果。
2.先旋转会改变坐标轴方向，当我们同时有位移和其他属性的时候，记得要将位移放到最前。
3.如果先写旋转，则后面的效果以旋转后的轴向为准，会影响旋转的效果。
渐变
渐变是多个颜色逐渐变化的视觉效果，一般用于设置盒子的背景。
background-image:linear-gradient(
transparent，
颜色2
）;
动画
动画可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比于过渡来说，动画可以实现更多变化，控制，连续自动播放的效果。
动画序列
（1）0%是动画的开始，100%是动画的完成，这样的规则就是动画序列。
（2）在@keyframes中规定某种CSS样式，就能够创建由当前样式逐渐改为新样式的动画效果。
（3）动画是使元素从一种样式逐渐变化为另外一种样式的效果，我们可以改变任意多的样式任意多的次数。
（4）用百分比来规定变化发生的时间，或者用from和to,等同于0%和100%
基本使用
制作动画分为俩步：先定义动画+再使用动画
//定义动画
@keyframes 动画名称 {
0%{
width:100px;
}
100%{
width:200px;
}
}
//元素使用动画
div {
animation-name:动画名称;
animation-duration:持续时间;
}
//旋转类盒子的制作
@keyframes move{
0% {
transform:translate(0,0);
}
25%{
transform:translate(1000px,0);
}
50%{
transform:translate(1000px,500px);
}
75%{
transform:translate(0,500px);
}
100%{
transform:translate(0,0);
}
动画属性
简写属性：
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
（1）简写属性不包括animation-play-state
(2) 暂停动画：animation-play-state:puased经常和鼠标配合使用。
（3）要想动画走回来，而不是跳回来：animation-direction:alternate
(4) 盒子动画结束后，停在结束位置：animation-fill-mode:forwards
（5）动画名称和动画时长必须赋值
（6）取值不分先后顺序
（7）如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
（8）用steps实现逐帧动画：一般通过配合精灵图实现效果。
animation-timing-function:steps(N);
//将过程分为N份
3D转换
3D环境的特点：近大远小+物体后面遮挡不可见
3D移动translate3d
3D透视perspective
(1) 如果我们想要产生3D的效果需要透视，将3D物体投影在2D平面上。
(2) 透视也就是视距（人的眼睛要屏幕的距离）。
（3）距离视觉点越近的成像大，越远成像越小。
写法：
透视要写在被观察元素的父盒子上面（d是视距，z是z轴也就是物体距离屏幕的距离，z轴越大，我们看到的物体就越大）
translateZ
仅仅在z轴上发生移动，有了透视，就可以看到translateZ引起的变化了。
3D旋转rotate3D
3D旋转可以让元素在三维平面内沿着x轴，y轴，z轴旋转
transform:rotateX(45deg);
//沿着x轴正方向旋转
transform:rotate(x,y,z,deg)；
//沿着自定义轴旋转
transform:rotate(1.0.0，45deg)；
//沿着x轴旋转45度
transform:rotate(1,1,0,45deg);
//沿着对角线旋转45度
3D呈现transform-style
（1）为父元素添加transform-style:preserve -3d使得子元素真正处于3d空间。
（2）按要求设置子盒子的位置（位移或者旋转）
（3）空间内转换元素都有自己独立的坐标轴，互不干扰。
浏览器的私有前缀
