A我今天學(xué)了什么
1公共樣式的提取
寫好自己專用css樣式
2Css2D轉(zhuǎn)換
transform:translate(x,y) rotate(30deg)
translate(x,y) //位移
rotate() //旋轉(zhuǎn)
scale(x,y) //縮放
skew(x,y) //傾斜
配合transform屬性使用
2.1translate位移
該元素移動的位置，取決于寬度（X軸）和高度（Y)
translate(x,y) x橫坐標(biāo)方向移動的距離,y縱坐標(biāo)方向移動的距離div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
2translate位移
該元素移動的位置，取決于寬度（X軸）和高度（Y)
translate(x,y) x橫坐標(biāo)方向移動的距離,y縱坐標(biāo)方向移動的距離div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
旋轉(zhuǎn)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）轉(zhuǎn)變寬度為原來的大小的2倍，和其原始大小3倍的高度。
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 標(biāo)準(zhǔn)語法 */
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 */
}
3transition過渡
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)
}
B我掌握了什么
1公共樣式的提取
寫好自己專用css樣式
2Css2D轉(zhuǎn)換
transform:translate(x,y) rotate(30deg)
translate(x,y) //位移
rotate() //旋轉(zhuǎn)
scale(x,y) //縮放
skew(x,y) //傾斜
配合transform屬性使用
2.1translate位移
該元素移動的位置，取決于寬度（X軸）和高度（Y)
translate(x,y) x橫坐標(biāo)方向移動的距離,y縱坐標(biāo)方向移動的距離div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
2translate位移
該元素移動的位置，取決于寬度（X軸）和高度（Y)
translate(x,y) x橫坐標(biāo)方向移動的距離,y縱坐標(biāo)方向移動的距離div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
旋轉(zhuǎn)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）轉(zhuǎn)變寬度為原來的大小的2倍，和其原始大小3倍的高度。
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 標(biāo)準(zhǔn)語法 */
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 */
}
3transition過渡
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)
}
C我沒掌握什么
全部掌握
