同时又位移和其他属性，我们需要把位移放到最前面
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
语法：
transform: translate(x,y); 或者分开写 transform:transformX(n); transform:transformY(n);重点：
定义2D转换中的移动，沿着X和Y轴移动元素translate最大的优点：不会影响到其他元素的位置translate中的百分比单位是相对于自身元素的translate:(50%，50%)对行内标签没有效果可以配合定位给大盒子内的小盒子水平垂直居中。
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
语法：
transform: rotate(高度)重点：
rotate里面跟度数，单位是deg 比如rotate（45deg）角度为正时，顺时针，负时，为逆时针默认旋转的中心点是元素的中心点我们可以设置元素转换的中心点
语法：
transform-origin：x y;重点：
注意后面的参数x和y用空格隔开x y默认转换的中心点事元素的中心点（50% 50%）还可以给x y设置 像素 或者 方位名词 （top bottom left right center）语法：
transform:scale(x,y);重点：
transform:scale(2,2);等价于transform:scale(2);transform:scale(0.5,0.5):缩小scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子。制作动画分为两步：
先定义动画再使用（调用）动画用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称｛ 0%｛ width:100px; ｝ 100%{ width:200px; } ｝动画序列
0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。请用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%。元素可以添加多个动画，用逗号隔开。 animation:bear 1s step(8) infinite,move 3s forward;
动画常用属性
属性描述@keyframes规定动画animtion所有动画属性的简写属性，除了animation-play-state属性animation-name规定@keyframes动画的名称（必须的）animtion-duration规定动画完成一个周期所花费的秒或毫秒，默认是0.（必须的）animation-timing-function规定动画的速度曲线，默认是easeanimtion-delay规定动画何时开始，默认是0animation-iteration-count规定动画被播放的次数，默认是1，还有infinite（无限）animtion-direction规定动画是否在下一周期逆向播放，默认是normal ，alternate逆播放animation-play-state规定动画是否正在运行或暂停。默认是running 还有pauseanimtion-fill-mode规定动画结束后状态，保持forwards，回到起始backwards动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态.
animation: myfirst 5s linear 2s infinite alternate;注意：
简写属性里面不包括animation-play-state暂停动画：animation-play-state:puased;经常和鼠标经过等其他配合使用想要动画走回来，而不是直接跳回来：animation-direction：alternate盒子动画结束后，停在结束为止：animation-fill-mode：forwardsanimation-timing-function:规定动画的速度曲线，默认是“ease”
值描述linear动画从头到尾的速度是相同的。匀速ease默认，动画以低速开始，然后加快，在结束前变慢ease-in动画以低速开始ease-out动画以低速结束ease-in-out动画以低速开始和结束steps()指定了时间函数中的间隔数量（步长）语法：
transform:translateX(100px); 仅仅是在x轴上移动 transform:translateY(100px); 仅仅是在y轴上移动 transform:translateZ(100px); 仅仅是在z轴上移动（注意：translateZ一般用px单位） transform:translate3d(x,y,z); 其中x y z 分别指要移动的轴的方向的距离3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。
语法
transform：rotateX（45deg） 沿着x轴正方向旋转45度 transform：rotateY（45deg） 沿着y轴正方向旋转45度 transform：rotateZ（45deg） 沿着z轴正方向旋转45度 transform：rotate3d（x,y,z,deg） 沿着自定义轴旋转deg度 xyz表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。 eg： transform：rotate3d(1,1,0,45deg) 沿着对角线旋转45deg
控制子元素是否开启三维立体环境 transform-style：flat 子元素不开启3d立体空间 默认的 transform-style：preserve-3d； 子元素开启立体空间 代码写给父级，但是影响的是子盒子
刚开始界面显示橙色 鼠标移动到盒子盒子向x轴正方形旋转90度，呈现底下的蓝色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } ul li{ height: 55px; width: 200px; margin: 100px auto; list-style: none; } .box{ position: relative; width: 100%; height: 100%; /*子元素开启立体空间，呈现3D效果*/ transform-style: preserve-3d; /*过渡*/ transition: all 0.4s; } .box:hover{ /*鼠标移动到盒子，盒子沿x轴旋转90度*/ transform: rotateX(90deg); } .front,.back{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .front{ background-color: #ff7c2d; z-index: 1; transform: translateZ(27.5px); } .back{ background-color: #00a4ff; /* 这个x轴一定是负值 */ /* 我们如果有移动 或者其他样式，必须先写我们的移动 */ transform: translateY(27.5px) rotateX(-90deg); } </style> </head> <body> <ul> <li> <div class="box"> <div class="front"></div> <div class="back"></div> </div> </li> </ul> </body> </html>