标签：rotate center 效果 变形 skew transform CSS2D scale translate

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。