css3包括两种转换，2D转换和3D转换。
css3的转换允许我们对元素进行旋转、缩放、移动或倾斜。
不管2D转换还是3D转换都是操作的同一个的属性：transform
有四种转换：rotate、scale、translate、skew
在x和y方向平移元素:
transform: translate(500px, 0px);
说明：
参数可以是像素或百分比。
参数1：沿x方向的平移，正表示向右移动
参数2：沿y方向的平移，正表示向下移动
如果是百分比是相对于自己的宽高的百分比。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 200px; background-color: pink; } div:nth-of-type(2){ background-color: gray; /*沿x轴平移500px， 沿y轴方向不动*/ transform: translate(500px, 0px); } </style> </head> <body> <div></div> <div></div> </body> </html>如果仅仅沿x或y某一个方向运动，也可以使用：
transform:translateX(200px);
或
transform:translateY(200px);
旋转元素， 是指有沿着 z 轴旋转。(就是垂直于屏幕的轴）
transform:rotate(10deg);
参数必须是度数。大于0表示顺时针旋转的度数，小于0表示逆时针旋转的角度。
注意：
旋转的时候默认是以元素的几何中心作为轴来旋转的。可以使用 transform-origin: offsetX offsetY;来设置旋转的时候的轴的位置. transform-origin: 0 0;对元素进行放大。
transform: scale(倍数);
注意：
倍数大于表示放大，小于1表示缩小。不需要带单位默认任然是元素中心作为放大或缩小的参考点 transform: scale(.5); transform-origin: 0 0; transform: scale(.5);skew是倾斜（斜切）。让元素与x方向或y方向产生倾斜。
transform: skew(40deg,10deg);
参数1：x方向的倾斜度数
参数2：y方向的倾斜度数
transform-origin: 0 0; transform: skew(40deg,10deg);想对2D转换来说，3D转换浏览器支持的不太好。不过在移动端可以放心的使用。
3D坐标系：
默认情况水平向右为x轴正方形、垂直向下为y轴正方形、垂直于屏幕向外的为z轴正方形
perspective（透视）是transform变形3D中最重要的内容。如果不设置透视，元素的3D变形效果将无法实现，所有的变化都会被投影到2D的区域展示。
可以简单理解为 视距，用来设置用户和元素 3D 空间 Z 平面之间的距离。而其效应由他的值来决定，值越小，用户与 3D 空间 Z 平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就越小。
要把它用在父容器中。
translate3D(x,y,z) 可以在x,y,z三个方向移动。
translateZ(z) 只在z轴平移
注意：判断是顺时针还是逆时针，让逆着坐标轴的正放下观察的。
可以使用rotateX、rotateY、rotateZ表示沿着某个轴的旋转
rotateX(40deg) 等同于 rotate3d(1,0,0,40deg)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer, .inner { margin: 100px auto; width: 400px; height: 400px; background-color: gray; } .outer { perspective: 300px; } .inner { background-color: pink; transform: rotateX(45deg); } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>参数分别表示沿着向相应的坐标轴的缩放。注意sz其实是缩放的translateZ的值，如果没有设置translateZ则sz的值无效的。
scaleX、scaleY、scaleZ分别表示x，y，z方向的缩放。
表示他的子元素在变形的时候，是在一个2d平面内变形，还是在一个3d平面内变形。
两个值：flat和preserve-3d
flat：变形仍然在2d空间
preserve-3d：3d空间内变形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer, .inner { margin: 300px auto; width: 400px; height: 400px; background-color: gray; } .outer { transform:rotateY(45deg); transform-style: preserve-3d; } .inner { background-color: pink; transform:rotateX(60deg); } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>transition属性定义一个元素两种状态之间的过渡。是下面四个属性的简写：
transition-property, transition-duration, transition-timing-function, transition-delay
不同的状态可以通过伪类像:hover、:active来定义。也可以通过js代码来动态的改变。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过渡</title> <style> .box { border: 1px solid #000; margin: 100px auto; display: block; width: 100px; height: 100px; background-color: #0000FF; /*过渡的属性 过渡时间 过渡函数 延迟时间*/ transition: width 2s linear 1s; } .box:hover { width: 200px; } </style> </head> <body> <div class="box"></div> </body> </html>如果想同时定义多个过渡属性，则可以使用逗号分开。
transition: width 2s linear 1s, height 3s linear 2s;过渡属性和过渡周期不能省略。
过渡函数主要有以下几个值：
如果不设置默认是：ease
transition-timing-function: ease; transition-timing-function: ease-in; transition-timing-function: ease-out; transition-timing-function: ease-in-out; transition-timing-function: linear; transition-timing-function: step-start; transition-timing-function: step-end;延迟时间如果不设置默认是 0s
我们在使用 transition实现动画的时候只能指定要改变的属性的开始值和结束值，然后在这两个值之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画效果
而animation通过定义多个关键帧( keyframes )以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。
下面的表格列出了 @keyframes 规则和所有动画属性：
属性描述CSS@keyframes规定动画。3animation所有动画属性的简写属性，除了 animation-play-state 属性。3animation-name规定 @keyframes 动画的名称。3animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3animation-timing-function规定动画的速度曲线。默认是 “ease”。3animation-delay规定动画何时开始。默认是 0。3animation-iteration-count规定动画被播放的次数。默认是 1。3animation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”。3animation-play-state规定动画是否正在运行或暂停。默认是 “running”。3animation-fill-mode规定对象动画时间之外的状态。3 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> div{ width : 200px; height : 200px; margin: 200px auto; background-color : pink; animation-name: my_animation; animation-duration: 3s; animation-iteration-count: 1; animation-direction: reverse; animation-delay:2s; animation-timing-function: linear; animation-fill-mode: both; } @keyframes my_animation { 0%{ width: 200px; height: 200px; } 100%{ width: 600px; height: 600px; } } </style> </head> <body> <div></div> </body> </html>@keyframes 动画名{
//定义关键帧
}
关键帧定义时可以使用from、to、百分比from表示0%、to表示100%可以定义很多关键帧。20%、30%、…百分比其实是指的时间完成的百分比。(考虑以前学习过的归一化的时间)animation-timing-function可以是以下的关键值：
animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end;也可以是下面的函数：
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); cubic-bezier：贝塞尔曲线。如果提供的关键值不是我们想要的，则可以使用贝塞尔曲线定制自己需要的任何速度曲线。可以使用在线工具生成贝塞尔函数。https://isux.tencent.com/css3/tools.html
例如：
cubic-bezier(0.315, -0.575, 0.680, 1.650)
对应的曲线：
steps(4, end): 表示每两个关键帧中间共需要再填充3个关键帧。