经常被这些这些属性搞晕,今天来系统总结一下, 下次忘了直接过来看...
首先解释一下名词, 注意标题中提到的几个词并不一定都是平级关系
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; }