1，今天我學會了
1.公共樣式的提取
2.css2d轉換
transform:translate(x,y) rotate(30deg)
//位移
translate(x,y)
//旋轉
rotate(deg)
//縮放
scale(x,y)
//傾斜 skew(x,y)
配合transform屬性使用
2.1translate位移
該元素移動的位置，取決于寬度（X軸）和高度（Y)
translate(x,y)
//x表示移動的寬度,y軸表示移動的高度
div2 { transform:translate(50px,100px);
-ms-transform:translate(50px,100px);
/* IE 9 */
-webkit-transform:translate(50px,100px);
/* Safari and Chrome */
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軸）的參數(shù)
//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.trainsition過渡
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;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
div:hover{
width:200px;
height:200px;
transform:rotate(30deg) }
2.今天熟悉了
1.公共樣式的提取
2.css2d轉換
transform:translate(x,y) rotate(30deg)
//位移
translate(x,y)
//旋轉
rotate(deg)
//縮放
scale(x,y)
//傾斜 skew(x,y)
配合transform屬性使用
2.1translate位移
該元素移動的位置，取決于寬度（X軸）和高度（Y)
translate(x,y)
//x表示移動的寬度,y軸表示移動的高度
div2 { transform:translate(50px,100px);
-ms-transform:translate(50px,100px);
/* IE 9 */
-webkit-transform:translate(50px,100px);
/* Safari and Chrome */
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軸）的參數(shù)
//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.trainsition過渡
CSS3 過渡（transition） 配合hover使用
//改變寬度時長為2秒
div {
transition: width 2s;
-webkit-transition: width 2s;
/* Safari */
}
div:hover{ width:100px; }
3.今天不懂的
多項改變
div {
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
div:hover{
width:200px;
height:200px;
transform:rotate(30deg) }
