9.21（动画）

Posted 2021-01-07 jihongtao

#1 2D

#2 平移

transform:translate(20px); /* 向右移动20px */

transform:translate(20px,20px); /* 向右且向下都移动20px */

transform:translate(-20px,-20px); /* 向左且向上都移动20px */

transform:translateX(-20px); /* 向左移动20px */

transform:translateY(-20px); /* 向上移动20px */

#3 旋转

transform:rotate(60deg); /* 顺时针旋转60度 */

transform:rotate(-60deg); /* 逆时针旋转60度 */

transform:rotate(-3turn); /* 逆时针旋转3圈=360*3 度 */

#4 缩放

transform:scale(1.1); /* 宽高都放大1.1倍 */

transform:scaleX(1.1); /* 宽放大1.1倍 */

transform:scaleY(1.1); /* 高放大1.1倍 */

transform:scale(1.1，1.2); /* 宽放大1.1倍，高放大1.2倍 */

transform:scaleY(0.5); /* 宽高是原来的一半 */

#5 倾斜

transform:skew(45deg); /* X轴倾斜45度 */

transform:skewY(45deg); /* Y轴倾斜45度 */

#6 过渡

transition-property:transform或all; /* 给哪个属性加过渡效果 */

transition-duration:1s; /* 整个动画耗时1秒完成 */

transition-timing-function:linear; /* 时间曲线：线性(匀速) */

transition-delay:500ms; /* 等待500毫秒再执行动画 */

#7 组合

transition:transform 1s linear 500ms;