如果只写一个值
3D 转换 transform
动画：animation
过渡：transitiontransition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素差别状态间的平滑过渡（补间动画），经常用来制作动画效果。
补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
帧动画：通过一帧一帧的画面凭据固定挨次和速度播放。如影戏胶片。
transition 包孕以部属性：
transition-property: all; 如果但愿所有的属性都产生过渡，就使用all。
transition-duration: 1s; 过渡的连续时间。
transition-timing-function: linear; 运动曲线。属性值可以是：
linear 线性
ease 减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
transition-delay: 1s; 过渡延迟。多永劫间后再执行这个过渡动画。
上面的四个属性也可以写成综合属性：
transition: 让哪些属性进行过度 过渡的连续时间 运动曲线 延迟时间; transition: all 3s linear 0s;
此中，transition-property这个属性是尤其需要注意的，差此外属性值有差此外现象。我们来示范一下。
如果设置 transition-property: width，意思是只让盒子的宽度在变革时进行过渡。效果如下：
如果设置 transition-property: all，意思是让盒子的所有属性（包孕宽度、配景色等）在变革时都进行过渡。效果如下：
转换是 CSS3 中具有颠覆性的一个特征，可以实现元素的位移、旋转、变形、缩放，甚至撑持矩阵方法。
转换再共同过渡和动画，可以代替大量早期只能靠 Flash 才可以实现的效果。
在 CSS3 傍边，通过 transform 转换来实现 2D 转换或者 3D 转换。
2D转换包孕：缩放、移动、旋转。
1、缩放：scale格局：
transform: scale(x, y); transform: scale(2, 0.5);
参数解释： x：暗示程度标的目的的缩放倍数。y：暗示垂直标的目的的缩放倍数。如果只写一个值就是等比例缩放。
取值：大于1暗示放大，小于1暗示缩小。不能为百分比。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 1000px; margin: 100px auto; } .box div { width: 300px; height: 150px; background-color: pink; float: left; margin-right: 15px; color: white; text-align: center; font: 400 30px/150px “宋体”; } .box .box2 { background-color: green; transition: all 1s; } .box .box2:hover { /*width: 500px;*/ /*height: 400px;*/ background-color: yellowgreen; /* transform: css3顶用于做调动的属性 scale(x,y)：缩放 */ transform: scale(2, 0.5); } </style> </head> <body> <div class="box"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </div> </body> </html>
效果：
上图可以看到，给 box2 设置 2D 转换，并不会把兄弟元素挤走。
2、位移：translate格局：
transform: translate(程度位移, 垂直位移); transform: translate(-50%, -50%);
参数解释：
参数为百分比，相对付自身移动。
正值：向右和向下。 负值：向左和向上。如果只写一个值，则暗示程度移动。
格局举例：
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/29284.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")