1.transform()方法
通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:
1 transform: translate(100px,200px); /*translate移动*/
transform-origin
transform-origin: 50% 0; /*X轴Y轴坐标,改变转的焦点*/
2.rotate()方法
rotate() 方法通过指定一个角度,改变了画布坐标和 Web 浏览器中的 <Canvas> 元素的像素之间的映射,使得任意后续绘图在画布中都显示为旋转的。它并没有旋转 <Canvas> 元素本身。注意,这个角度是用弧度指定的。
1 @keyframes move { 2 0%{ 3 transform: rotate(0); } 4 100%{ 5 transform: rotate(360deg); 6 } 7 }
1 @keyframes fanZhuan { 2 from{ 3 transform: rotate(360deg); 4 } 5 to { 6 transform: rotate(0); 7 } 8 }
3.animation属性
1 #div1{ 2 width: 300px; 3 height: 300px; 4 margin: 100px auto 0; 5 background: lightcoral; 6 animation: move 2s linear 2s infinite; /* linear 匀速 infinite 无限的*/ 7 }
4.transition属性
1 #box{ 2 width: 475px; 3 height: 308px; 4 border: 5px solid red; 5 margin: 100px auto 0; 6 overflow: hidden;/*超出部分隐藏*/ 7 } 8 #box>img{ 9 width: 100%; 10 height: 100%; 11 transition: all 2s; 12 /*all也可以改成transform*/ 13 /*谁动给谁加时间*/ 14 } 15 #box>img:hover{ 16 transform: scale(1.2); /*放大倍数*/ 17 }