trasition过渡效果设置

transition-property指定过渡属性的名称

transtition-duration指定该属性过渡持续时间

transition-delay指定过渡效果开始之前需要等待时间

transition-timing-function指定过渡效果类型

ease默认值，先加速后减速

linear匀速

ease-in加速

ease-out减速

ease-in-out先加速后减速效果比ease效果强烈些

cubic-bezier贝塞尔曲线按照贝塞尔曲线的速度运动可以在cubic-bezier(.17,.67,.83,.67) ✿ cubic-bezier.com中获取想要的数值

简写属性transition：property duration delay timing-function；

transform变形

rotate旋转

按照基点进行旋转语法：transform：rotate（45deg）；正值为顺时针旋转，负值为逆时针旋转

translate移动

按照基点进行水平方向移动，语法：transform:translate(x,y);

正值x为向右移动，y为向下移动

负值x为向左移动，y为向上移动

scale缩放

按照基点进行缩放，语法：transform：sclae（x,y);

x值为向基点水平方向进行缩放

y值为向基点垂直方向进行缩放

skew扭曲

按照基点进行扭曲变形，语法：transform：skew（x,y）；

这里的x，y取角度

按照给定的角度沿基点x，y轴进行扭曲变换

matrx矩阵

以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换

transform-origin改变元素基点

更改元素进行变形的参照基点，语法：transform-origin：；

它的取值可以为left，right，top，bottom，center

也可以为left center，right center，top center，bottom center，center center

还可以为百分比参照物为容器本身左上角

transform需要在不同浏览器内核中添加前缀避免兼容问题

-moz-transform:rotate translate scale skew;

-webkit-transform:rotate translate scale skew;

-o-transform:rotate translate scale skew;

-ms-transform:rotate translate scale skew;

transform:rotate translate scale skew;

 

 

 

 

 

标签：rotate,center,效果,变形,skew,transform,CSS2D,scale,translate
来源： https://blog.csdn.net/lmz199941/article/details/117355677