css3动画 mignon_CSS3的变形transform、过渡transition、动画animation学习

学习CSS3动画animation得先了解一些关于变形transform、过渡transition的知识

这些新属性大多在新版浏览器得到了支持，有些需要添加浏览器前缀(-webkit-、-moz-、-ms-、-o-)，本文为简化内容，直接使用了原版属性

根据不同属性的支持度，在实际使用的时候需要添加相应的浏览器前缀支持

目录：

一、变形transform

变形有rotate旋转、scale缩放、translate位移、skew倾斜、matrix矩阵变形、perspective透视几种操作，通过例子来了解各个操作

1. 初始页面结构

html{font-family:Arial;

}.box{position:relative;margin:200px auto;width:100px;height:20px;text-align:center;border:1px solid #ddd;background-color:#75e275;cursor:pointer;

}.left,

.right{position:absolute;top:-10px;width:10px;height:40px;background-color:#4d8aeb;

}.left{left:0;

}.right{right:0;

}.box:hover{transform:rotate(-30deg);

}