1、公共樣式的提取
2、CSS2d 的轉(zhuǎn)換
transform:translate(x,y) rotate(30deg)
//位移（）旋轉(zhuǎn)()
translate(x,y)
//位移
rotate（）
//旋轉(zhuǎn)
scale（x，y）
//縮放
skew（x,y）
//傾斜握玛，配合transform屬性使用
例子：
//HTML
<div>正常</div>
<div class="box">位移</div>
<div class="box1">旋轉(zhuǎn)</div>
<div class="box2">縮放</div>
<div class="box3">斜切</div>
//CSS
div {
width: 100px;
height: 100px;
background-color: yellow;
margin: 20px;
/*公共樣式的提取*/
}
.box {
transform: translate(200px, 30px);
/*位移*/
}
.box1 {
transform: rotate(30deg);
/*旋轉(zhuǎn)*/
}
.box2 {
transform: scale(0.8, 0.5);
/*縮放*/
}
.box3 {
transform: skew(10deg, 10deg);
/*斜切*/
}
2.1translate位移
該元素移動(dòng)的位置，決定于寬度（x軸）和高度（y軸）
translate(x,y)
//x軸坐標(biāo)方向移動(dòng)的距離甫菠，y縱坐標(biāo)方向移動(dòng)的距離div1#div2
2.2rotate旋轉(zhuǎn)
2.3 scale縮放
scale縮放（）方法挠铲，該元素增加或減少的大小，取決于寬度（x軸）和高度（y軸）的參數(shù)寂诱。
//scale(2,3)轉(zhuǎn)變寬度為原來的大小的2倍和其原始大小3倍的高度
2.4skew傾斜
傾斜skew(x,y)方法
//代表水平方向拂苹，y軸代表垂直方向
3、transition過渡
CSS3過渡（transition）配合hover使用
//改變寬度時(shí)長(zhǎng)為2s
div{transition:width:2s}
div:hover{width:100px;}
多項(xiàng)變化
div{
transtion:width2s,height2s,transform2s;
//transtion:all 2s;
}
div:hover{
width:200px;
height:200px;
transform:rotate(300deg）}
例子：
//HTML
<div class="box"></div>
//CSS
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background-color: aqua;
transition: 10s all;
}
.box:hover {
width: 500px;
height: 500px;
background-color: pink;
transform: rotate(180deg) scale(0.8, 0.5);
}
