day08

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轴）的参数

//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轴）的参数

//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) }