第一节 2D效果
1、CSS3过渡
2、2D变形
要实现这一点，必须规定两项内容：
1、规定您希望把效果添加到哪个CSS属性上
2、规定效果的时长
比方说，下面这个代码的动画效果，规定了效果的时长为2秒。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; transition: all 2s; }
.box:hover {width: 200px; height: 200px; background: #0f0;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; transition-property: width; transition-duration: 2s;}
.box:hover {width: 200px; height: 200px; background: #0f0;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
transition-property: width,height,background; transition-duration: 2s;
上面这一句代码的效果等同于下面这一句：
transition: all 2s;
cubic-bezier(n,n,n,n),贝塞尔曲线取值，可以利用以下网站去参考：
http://cubic-bezier.com/
延迟开始过渡效果。
总体上，transition的几个属性值，可以像以下的代码这样子写，来控制2D效果：
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; transition: all 2s linear 1s;}
.box:hover {width: 200px; height: 200px; background: #0f0;}
</style>
如下示例代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; margin: 100px auto; transform: rotate(30deg);}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
不加transform前的位置和加了transform：translate（）之后，位置上出现移动。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; margin: 100px auto; transform: translate(100px,100px);}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
特别注意：元素的缩放中心点是元素的中心位置。
简单例子如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; margin: 100px auto; transform: scale(2,4);}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; margin: 100px auto; transform: skew(30deg,40deg);}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; margin: 100px auto; transform: rotate(-30deg);}
.box2{width: 100px; height: 100px; background: #0f0; margin: 200px auto; transform-origin: left top; transform: rotate(-30deg); }
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
上面的box2是采用transform-origin：left top，对对应的正方形进行元素的中心点设置，之后进行变换的时候，依据这个中心点，进行相应的旋转等一系列变换。
下面这一个是对上面两种变换的进一步的优化，形成2D动画。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; margin: 100px auto; transition: all 1s;}
.box:hover{transform: rotate(-30deg);}
.box2{width: 100px; height: 100px; background: #0f0; margin: 200px auto; transform-origin: left top; transition: all 1s;}
.box2:hover{transform: rotate(-30deg); }
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
下面是对整个2D效果的综合案例
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {width: 100px; height: 100px; border: 1px #f00 solid; margin: 100px auto; transition: all 2s;}
div:nth-child(1):hover {transform:translateX(200px); }
div:nth-child(2):hover {transform:rotate(90deg); }
div:nth-child(3):hover {transform:scale(2,0.5); }
div:nth-child(4):hover {transform:skew(30deg,30deg); }
div:nth-child(5):hover {transform:translateX(200px) rotate(90deg) scale(2,0.5) skew(30deg,30deg); }
div:nth-child(6):hover {transform:rotate(90deg) scale(2,0.5) skew(30deg,30deg) translateX(200px) ; }
div:nth-child(7):hover {transform: scale(2,0.5) rotate(90deg) skew(30deg,30deg) translateX(200px) ; }
</style>
</head>
<body>
<div>2D平移</div>
<div>2D旋转</div>
<div>2D缩放</div>
<div>2D扭曲</div>
<div>2D综合</div>
<div>2D综合2</div>
<div>2D综合3</div>
</body>
</html>
