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变换相对于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);

下边来两个例子

重点均在于，先进行各个面的位置旋转处理。

<div class="nav">  <div class="face">35哥</div>  <div class="botton">喊你起床了</div>  <div class="back">35哥</div>  <div class="top">喊你起床了</div></div>

//定义绕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);}

旋转木马案例

<div class="horse">	<div class="center"></div>	<div class="one"></div>	<div class="two"></div>	<div class="three"></div>	<div class="four"></div>	<div class="five"></div>	<div class="six"></div></div>

//这里做两个旋转动画，是为了中间的图反向旋转显示效果为静止@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的，不是马的。[打脸]