- transition：过渡
- transform：变换
- animation：动画
以上三者可以进行自由组合。
transition过渡：过渡属性主要用在hover伪类中，且添加在谁使用过渡加在谁中。
transition: 过渡作用的属性（全选为all） 持续时间 变化曲线函数（默认ease,linear是匀速变化）
.box {
width: 100px;
height: 100px;
background-color: red;
transition: all 2s linear;
}
.box:hover {
width: 500px;
background-color: yellow;
}以上的实际效果为：
animation动画：动画在页面加载时就可以直接运行，不需要手动开启。
使用动画需要两步：
- 定义动画
from相当于0%，to相当于100%，在其中定义动画所变换的属性。
@keyframes 动画名{
from{}
to{}
}- 使用动画
animation: 动画名 持续时间 延迟启动时间 变换函数 重复运行 反向变换，
动画名2 ......将之前的改为持续运行动画
@keyframes move{
from{}
to{
width: 500px;
background-color: yellow;
}
}
.box1 {
width: 100px;
height: 100px;
background-color: red;
animation: move 2s linear infinite alternate ;
}animation中的变换函数除了ease（默认） linear外，还有个steps（步进），在上一篇文章中有介绍。
transform变换，变换有2d变换和3d变换之分。变换元素不会脱标。
- 2d变换
1. translate：x轴y轴移动变换，相当于移动；
以左上角点为初始点，向右为x轴，向下为y轴。
transform: translateX(100px);
transform: translateY(100px);
//可以复写为:
transform: translate(100px, 100px);2. rotate: 旋转变换；角度单位为deg
transform: rotate(50deg);
//默认是以中心点为旋转参考点，可以更改
//单们可以是以左上为起点的px，也可以是方位单词
transform-origin: top left;3. scale：放大缩小变换，无单位，倍数。
// 两个n代表的是x与y方向的缩放比例，默认为1表示不放大也不缩小
// n代表的是放大倍数，大于1代表放大，小于1代表的是缩小
// 如果只有一个n则代表宽高同时放大或缩小
transform:scale(n,n);4. 复合写法：需要注意的是translate需要放在最前面，否则参考点会发生不确定变化。
transform: translate rotate scale;- 3d变换
3d变换相对于2d只是多了个z轴，z轴方向由屏幕向外延伸。
但是需要做一些设置才能显示出3d效果来。
1.开启透视perspective
- z轴正向时，z越大视觉越大，perspective越大视觉越小且大于z；
- z轴负向时，z越大视觉越小，perspective越大视频越大且大于0.
//一般在body标签上开启透视
body{
perspective:npx;
}2.在父元素中开启子元素的3d显示效果
/* 开启子元素3d 否则子和父元素一致*/
transform-style: preserve-3d;1.translate3d
translateY(npx);
translate3d(xpx,ypx,zpx);2.rotate3d:3d旋转要记住一个法则：左手法则，左手握拳，大拇指伸出，大拇指指向轴方向，手指的弯曲方向则是正值。因此，当以x轴旋转时，从上往内旋转则是正则，反之是负值。
rotateX(ndeg);
rotateY(ndeg);
//z轴旋转和上面的2d旋转相似
rotateZ(ndeg);
//此方式可以自由定义其旋转坐标轴，数值代表的是各个轴的长度比例，通过计算而来，推荐使用1的换算
//如以斜下右下为轴旋转 rotate3d(1,1,0,360deg)
rotate3d(x,y,z,ndeg);下边来两个例子
重点均在于，先进行各个面的位置旋转处理。
//定义绕x轴的3d正向旋转动画
@keyframes rote360{
from{}
to{
transform:rotateX(360deg);
}
}
.nav {
position: relative;
width: 150px;
height: 50px;
margin: 50px auto;
//透视距离
perspective: 700px;
//开启子元素的动画显示，否则会和父元素一样
transform-style: preserve-3d;
//使用动画，每2秒旋转一圈，匀速，无限
animation: rote360 2s linear infinite;
}
//定义上下，前后四个面
.nav .face,
.nav .botton,
.nav .back,
.nav .top{
//1.绝对定位，先使四面重叠放在一块
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: white;
font-size: 22px;
line-height: 50px;
text-align: center;
background-color: #008000;
}
//2.前面的面向前z轴移动25px
.nav .face{
transform: translateZ(25px);
}
//3.下面先向下移动25px，再x轴负向旋转-90度
.nav .botton {
background-color: red;
transform:translateY(25px) rotateX(-90deg);
}
//4.上面先上移动-25px，再x轴正向旋转90度
.nav .top {
background-color: purple;
transform:translateY(-25px) rotateX(90deg);
}
//5.后面先后移动-25px，再x轴正向旋转180度
.nav .back{
background-color: orange;
transform: translateZ(-25px) rotateX(180deg);
}旋转木马案例
//这里做两个旋转动画，是为了中间的图反向旋转显示效果为静止
@keyframes move1{
from{}
to{
transform: rotateY(360deg);
}
}
@keyframes move2{
from{}
to{
transform: rotateY(-360deg);
}
}
.horse{
position: relative;
width: 300px;
height: 200px;
margin: 0 auto;
//子类显示3d效果
transform-style: preserve-3d;
//旋转顺时针360，匀速，不间断
animation: move2 4s linear infinite;
}
//定义每个图片，且先重叠，使用绝对定位方式
.horse div {
position: absolute;
left: ;
top: 0;
width: 100%;
height: 100%;
background: url(img/dog.png) no-repeat center center;
background-size: 100%;
}
//定义第一匹马：z轴向外300px
.horse .one {
transform: translateZ(300px);
}
//定义第二匹马：先顺时旋转60度，再z轴向外300px
//这里需要先旋转，旋转后对于3d移动的坐标就变了，需要用到这种变化
//其他马类推
.horse .two {
transform: rotateY(-60deg) translateZ(300px);
}
.horse .three {
transform: rotateY(-120deg) translateZ(300px);
}
.horse .four {
transform: rotateY(-180deg) translateZ(300px);
}
.horse .five {
transform:rotateY(-240deg) translateZ(300px);
}
.horse .six {
transform:rotateY(-300deg) translateZ(300px);
}
//中间这个马，需要反向旋转，效果等同于静止
.horse .center {
animation: move1 4s linear infinite;;
}忘了说了，找图找了个dog的，不是马的。