A.今天學(xué)了什么

1.公共樣式的提取

<link href="css/base.css" type="text/css" rel="stylesheet" />

<link href="css/style.css" type="text/css" rel="stylesheet" />

2css2d轉(zhuǎn)換

transform:translate(x,y) rotate(30deg) 

//位移
translate(x,y)

//旋轉(zhuǎn)
rotate()

//縮放
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 */
}

2.2旋轉(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 */
}

再說垂直水平居中

/HTML
<div class="one">
    <div class="two">

    </div>
</div>
//css
.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;

3transition過渡

過渡（transition） 配合hover使用

div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
div:hover{ 
    width:100px;
}

多項(xiàng)改變

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.今天學(xué)到了什么

1.公共樣式的提取

<link href="css/base.css" type="text/css" rel="stylesheet" />

<link href="css/style.css" type="text/css" rel="stylesheet" />

2css2d轉(zhuǎn)換

transform:translate(x,y) rotate(30deg) 

//位移
translate(x,y)

//旋轉(zhuǎn)
rotate()

//縮放
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 */
}

2.2旋轉(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 */
}

再說垂直水平居中

/HTML
<div class="one">
    <div class="two">

    </div>
</div>
//css
.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;

3transition過渡

過渡（transition） 配合hover使用

div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
div:hover{ 
    width:100px;
}

多項(xiàng)改變

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.今天沒掌握什么

能掌握，但要多練練