2D变形

Posted 2020-10-12 小令君

CSS3所提供的动画功能主要包括变形、转换和动画技术。变形是最基本的动画形式，它主要通过CSS控制元素样式属性值的变化来实现。利用transform功能来实现文字或图像的旋转、缩放、倾斜和移动这4种类型的变形处理。

transform实现了一些可用SVG实现的变形功能，transform属性的基本语法如下所示：

transform：none|<transform-function>[<transform-function>];

transform-function设置变形函数：matrix()、scale()、translate()、totate()、skew()。

rotate(<angle>)函数用法

scale()函数能够缩放元素大小，语法格式：scale(<number>);number参数值可以是正数、负数和小数。

translate()函数能够重新定位元素的坐标，语法格式如下：translate(<translation-value>);

skew()函数能够让元素倾斜显示，会改变元素的形状，语法格式如下：skew(<angle>);

matrix()是矩阵函数，调用该函数可以非常灵活地实现各种变形效果。语法格式如下：

matrix(<number>,<number>,<number>,<number>,<number>,<number>);

CSS变形的原点默认为对象的中心点，如果要改变这个中心点，可以使用transform-origin属性进行定义。transform-origin属性的初始值为“50% 50%”,适用于块状元素和內联元素，transform-origin接受两个参数，可以是百分比、em、px等具体的值，也可以是left、center、right，或者top、middle、bottom等描述性关键字。

CSStransformation和CSS transition是两种不同的动画模型。

transition属性是一个复合属性，可以同时定义transition-property、transitionduration、transition-timing-function、transition-delay、transition-property、transition-duration、transition-timing-function和transition-delay子属性值。

transition-property属性用来定义转换动画的CSS属性名称。

transition-duration属性用来定义转换动画的时间长度，即设置从旧属性换到新属性花费的时间，单位为秒。

transition-delay属性用来定义过渡动画的延迟时间。

transition-timing-function属性用来定义过渡动画的效果，初始值为ease。

• ease：缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，即立方贝塞尔。
• linear：线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数。
• ease-in：渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数。
• ease-out：渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数。
• ease-in-out：渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数。
• cubic-bezier：特殊的立方贝塞尔曲线效果。

animation属性是一个复合属性，它包含了animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction子属性值。

animation-name属性可以定义CSS动画的名称，初始值为none。

animation-duration属性定义CSS动画的播放时间，初始值为0。

animation-timing-function属性定义CSS动画的播放方式，初始值为ease。

animation-delay属性可以定义CSS动画延迟播放时间，初始值为0。

animation-iteration-count属性定义CSS动画的播放次数，初始值为1，infinite表示无限次。

animation-direction属性定义CSS动画的播放方向，初始值为normal，另一个值为alternate。