CSS3动画（一）

CSS3动画

CSS3的意义

CSS3 是层叠样式表（Cascading Style` Sheets）语言的最新版本，旨在扩展CSS2.1。

带来了许多期待已久的新特性~~。
~~ 例如圆角、阴影、gradients(渐变)、 transitions(过渡)与 animations(动画) 。以及新的布局方式，如 multi-columns 、 flexible box 与 grid layouts。

注意：实验特性以浏览器引擎为前缀（vendor-prefixed)），应避免在生产环境中使用，或极其谨慎地使用，因为将来它们的语法和语义都有可能被更改。

---

CSS动画的主要组成

### transform的含义及使用

• transform的一些基本属性(2D属性)

• rotate
• scale
• matrix
• translate
• skew
  2D属性建立在平面直角坐标系上(即在X轴和Y轴上)。
  3D属性就是在电脑屏幕上面向用户穿出一个Z轴，所有的3D属性都是建立在多出一个Z轴的基础上

---

基本属性及使用方式如下：

属性	作用
translate(x,y)	使作用对象沿方向移动
scale(x,y)	使作用对象沿方向放大或者缩小
rotate(angle)	使作用对象沿一个点旋转所规定的角度
skew(x.y)	使作用对象沿着方向产生扭曲
matrix(x,y)	使作用对象以矩阵方向产生扭曲形变

rotate

<div class="rotate">Hello World</div>



/*以下是CSS代码*/
.rotate{
    margin:30px;
    width:200px;
    height:100px;
    background-color:yellow;
}
div {
    transform:rotate(9deg);
}

上述代码效果如下：

---

scale

<div>你好。这是一个div元素。</div>
<div id="div2">你好。这是一个div元素。</div>


/*以下是CSS代码*/
div{
    margin:30px;
    width:200px;
    height:100px;
    background-color:yellow;
}
div#div2{
    transform:scale(2,4);
}

上述代码效果如下：

---

translate

<div>你好。这是一个div元素。</div>
<div id="div2">你好。这是一个div元素。</div>




/*以下是CSS代码*/

div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:translate(50px,100px);

上述代码效果如下：

---

skew

<div>你好。这是一个 div 元素。</div>

<div id="div2">你好。这是一个 div 元素。</div>




/*以下是CSS代码*/

div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:skew(30deg,20deg);
}

上述代码效果如下：

---

matrix

<div>你好。这是一个 div 元素。</div>

<div id="div2">你好。这是一个 div 元素。</div>




/*以下是CSS代码*/
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}

上述代码效果如下：

---

下篇博客将继续讲解css3中的过渡效果与动画效果