# 1. **公共樣式的提取**
# 2.`css2d`轉換
~~~
transform:translate(x,y) rotate(30deg)
//位移
translate(x,y)
//旋轉
rotate()
//縮放
scale(x,y)
//傾斜
skew(x,y)
配合transform屬性使用
~~~
### 2.1translate位移
該元素移動的位置，取決于寬度（X軸）和高度（Y)
~~~
translate(x,y) x橫坐標方向移動的距離,y縱坐標方向移動的距離div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
~~~
~~~
再說垂直水平居中
<div class="one">
<div class="two">
</div>
</div>
.one{
width:400px;
height:400px;
background-color: red;
position: relative;
}
.two{
width:100px;
height:100px;
background-color: pink;
position: absolute;
margin:auto;
left:0;
top:0;
bottom:0;
right:0;
}
~~~
### **2.2旋轉rotate**
~~~
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
~~~
### 2.3縮放scale()方法，該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數
~~~
//scale（2,3）轉變寬度為原來的大小的2倍，和其原始大小3倍的高度。
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 標準語法 */
~~~
### **2.4** **傾斜**skew(x,y) 方法
~~~
x表示水平方向,y表示垂直方向
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
~~~
# **3.transition**過渡
~~~
CSS3 過渡（transition） 配合hover使用
//改變寬度時長為2秒
div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover{
width:100px;
}
多項改變
div
{
transition: width 2s, height 2s, transform 2s;
// transition: all 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
div:hover{
width:200px;
height:200px;
transform:rotate(30deg)
}
~~~
# **4.animation**動畫
~~~
動畫animation
1.定義@keyframes
A.@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
B.@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
div{
animation:myfirst 2s;
}
div{
animation:myfirst 2s infinite; //無限循環
}
~~~
# 5.` iconfont`的使用
~~~
http://www.iconfont.cn/
~~~
# 6.`animate.css`的使用
~~~
https://github.com/daneden/animate.css
~~~
