1 /*对元素进行改变（移动、变形、伸缩、扭曲）*/
2 .wrapper{
3 margin:100px 100px auto auto;
4 width:300px;
5 height:200px;
6 border:2px dotted blue;
7 }
8 .wrapper div{
9 width:300px;
10 height:200px;
11 background:red;
12 color:blue;/*设置文本颜色 如果有的话*/
13 text-align:center;/* 设置文本位置 如果子元素有的话 */
14 line-height:200px;/* 设置行间距 */
15 border-radius:30px;/* 设置角半径 */
16
17 /*属性*/
18 transform-origin:top right;/*设置元素的中心点 top center right left bottom 合理的情况下任意两两组合 例如 top right 表示右上角*/
19
20 /*函数*/
21 transform:rotate(20deg);/* 旋转20°，整数表示顺时针，负数表示逆时针 */
22 transform:skew(15deg,20deg);/*x轴扭曲15°，y轴扭曲20°*/
23 transform:scale(1.5,0.5);/*根据中心点x方向放大1.5倍 y轴缩小0.5倍*/
24 transform:translate(-100px,50px);/*沿x轴负方向移动100px，沿y轴正方向移动
25 50px*/
26 }
27 span{
28 display:block;/* 转换为块状元素 */
29 }
通过鼠标的点击、获得焦点，被点击或对元素的任何改变中触发，并平滑的以动画的效果改变css的属性值
对元素用到的四个属性为：
- transition-property：width;//表示对那个属性进行变化
- transition-duration：5s;//表示动画持续的时间
- transition-timing-function：ease；
- transition-delay：0.5s;//表示动画延时时间
例子：
1 .wrapper{
2 margin:auto;
3 width:300px;
4 height:200px;
5 border:2px dotted blue;
6
7 transition-property:all;/*表示hover事件中的所有属性，改成width的话就只对width有
8 效，而height会瞬间变为50px不具有过度效果*/
9 transition-duration:5s;/*表示动画的持续时间*/
10 transition-timing-function:ease-in;/*表示动画的播放方式由快到慢*/
11 transition-delay:0.15s;/*表示动画的延时时间*/
12 }
13 .wrapper:hover
14 {
15 width:500px;
16 height:50px;
17 }