9.21学习笔记

动画

2D

平移

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

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

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

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

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

旋转

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

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

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

 

  

  

 

 

 效果图：

 

 

 

缩放

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

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

transform:sacleY(1.1);         高放大1.1倍

transform:sacleY(1.1,1.2);   宽放大1.1倍，高放大1.2倍

transform:scale(0.5);            宽高是原来的一半

倾斜

transform:skew(45deg);       x轴倾斜45度

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

过渡

transition-property:transform或者all；    给哪个属性加过渡效果

transition-durtaion:1s;                              整个动画耗时1秒完成

transition-timing-function:linear;               时间曲线：线性（匀速）

transition-delay:500ms；                          等待500毫秒再执行动画

组合

transition:transform 1s linear 500ms;     

 

3D

注意：

rotateX,rotateZ的旋转正方向是顺时针

rotateY的旋转正方向是逆时针

 

 

  

 

     

 

转载于:https://www.cnblogs.com/xieyankeai/p/9687329.html