区分CSS3中 transform, transition, translate, rotate, scale, 过渡, 动画

经常被这些这些属性搞晕,今天来系统总结一下, 下次忘了直接过来看...

首先解释一下名词, 注意标题中提到的几个词并不一定都是平级关系

transform: 其实与width,height等属于是平级关系, width代表宽度, height代表高度, transform代表缩放,平移,旋转等

translate, rotate, scale 这三个属性可以理解为 transform的子属性:

translate: 平移, transform: translate(10px, 20px); /*x轴平移10px, y轴平移20px*/

rotate: 旋转, 很好理解,控制物体的旋转 transform: rotate(7deg); /*旋转7°*/

scale: 缩放, 也很好理解, 控制物体的大小缩放, transform:scale(2); /*放大2倍*/

transition: 过渡

transition: width 2s; /*与宽度有关的变化会在2秒内过渡完*/

transition: height 2s;

transition: transform 2s; /*与缩放,旋转,平移等有关的变化会在2秒内过渡完*/

看如下例子:

div

{
	width:200px;
	height:100px;
	background-color:yellow;
	transition:transform 2s;
}
	
div:hover
{
	transform:rotate(7deg);
}

可以看出 transform属性 和 width, height等属性是平级的

width代表宽度, height代表高度, transform代表缩放,平移,旋转等

width: 200px;

height: 300px;

transform: rotate(7deg);

transform: translate(10px, 20px); /*x轴平移10px, y轴平移20px*/

个人理解:动画是对过度的加强, 其实达到的目的是一样的,比如如下功能:

动画实例:

div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 2s; /*如果使用该属性+@keyframe, 则div的宽度会在2秒内从100px变到300px*/
}

@keyframes myfirst
{
	from {width:100px;}
	to {width:300px;}
}

过渡实例:

div
{
	width:100px;
	height:100px;
	background:red;
	transition:width 2s; /*使用transition过度属性, 指定div的width属性相关的改变会在2秒内逐渐完成*/
}

div:hover{
	width:300px;
}