css3中变形与动画（一）

时间 2019-11-17

标签 css3 css 变形动画栏目 CSS 繁體版

原文原文链接

css3制做动画的几个属性：变形(transform)，过渡(transition)和动画(animation)。css

首先介绍transform变形。html

transform英文意思：改变，变形。前端

css3中transform主要包括如下几种：旋转(rotate),扭曲(skew)，缩放（scale)、移动(translate)和矩阵变形matrix。html5

语法：css3

transform ： none | <transform-function> [ <transform-function> ]* 
transform: rotate | scale | skew | translate |matrix;

none就是默认值，不进行变形。web

<transform-function>:表示一个或多个变换函数，以空格分开。便可同时对一个元素进行transform的多种属性操做，例如同时用rotate,scale和translate三种。canvas

rotate(<rotate-angle> [<cx> <cy>])
skewX(<skew-angle>)
skewY(<skew-angle>)
scale(<sx> [<sy>])
translate(<tx> [<ty>])
matrix(<a> <b> <c> <d> <e> <f>)

1、旋转rotate

rotate(<angle>) :经过指定的角度参数对元素指定一个2D rotation(2D旋转)，需先有transform-origin属性的定义。ide

transform-origin定义的是旋转的基点，其中angle是指选择角度，正顺时针旋转，负逆时针旋转。函数

rotate是一个颇有用的动画，可配合animation作出很是有意思的效果，看综合实例效果。学习

2、translate平移

translate()函数能够把元素从原来的位置移动，而不影响在x，y轴上的任何web组件，相似于position:relative。

根据给定的left（x坐标），top(y坐标)位置参数，元素从其当前位置移动。

translate()分三种状况：

一、translate(x,y)水平和垂直方向同时移动。

Note:translate移动的基点默认为元素中心点，能够根据transform-origin改变基点。

若是第二个值没设置，默认为0。

二、translateX(x)仅水平方向移动。

至关于translate(x,0,)的简写，基点为元素中心点。

三、translateY(y)仅垂直方向移动。

至关于translate(0,y)的简写，基点为元素在中心。

3、scale缩放

scale缩放和translate移动很是类似，也有三种状况。

缩放中心点：即元素的中心位置

基数：缩放就是既能够缩小，也能够放大；缩放基数为1，大于1放大，小于1缩小。

一、scale(x,y)元素在水平和垂直方向同时缩放。

Note：第二个参数未提供则取与第一个同样的值。

二、scaleX(x)x轴缩放。

三、scaleY(y)y轴缩放。

scale能够取负值，负值会让元素翻转并缩放。

<style>
    div {
    width: 100px;
    height: 100px;
    border-top: 1px dotted orange;
    border-right: 1px solid red;
    border-bottom: 1px solid pink;
    border-left: 1px solid green;
    text-align: center;
    line-height: 100px;
    color: red;
    font-size: 15px;
    transform: scale(-1.5);
    margin: 0 auto;
    margin-top: 50px;
}
</style>
<div>Scale(-1.5)</div>

View Code

4、skew切变

这个属性是用来制做倾斜度的,设计时在2d里面建立3d透视图的时候必须的属性。

skew和translate、scale同样有三种状况。

一、skew(x,y):x轴和y轴上的skew transformation（斜切变换）。

即x轴和y轴同时按照必定的角度值进行扭曲变形。

若是第二个参数未提供，则值为0，也就是y轴无斜切。

二、 skewX(x):按给定角度沿x轴指定一个skew transformation（斜切变换）。

三、skewY(y):按给定的角度沿Y轴指定一个skew transformation（斜切变换）。

5、矩阵matrix

matrix(<number>, <number>, <number>, <number>, <number>, <number>):以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,至关于直接应用一个[a,b,c,d,e,f]变换矩阵。就是基于水平方向和垂直方向从新定位元素。

SVG，css3，html5的canvas中都有矩阵变换，接下来简单说说。

一个元素渲染后就能够获得一张位图，而后对这个位图上每一点进行变换，就能够获得新的一张位图，从而产平生移，缩放，旋转，切变及镜像反射等效果。