今天学了什么1.公共样式的提取

1.公共样式的提取

     建立base.css

2.css2d转换

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

     //位移
translate(x,y)
//旋转
rotate()
//缩放
scale(x,y)
//倾斜
skew(x,y)
配合transform属性使用

3.再说垂直水平居中

     <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;

4旋转rotate

     div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

    缩放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); 标准语法 

     倾斜skew(x,y) 方法
x表示水平方向,y表示垂直方向
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); 
-webkit-transform: skew(30deg,20deg);  Safari and Chrome 
}

5transition过渡

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

今天学会了什么

1.公共样式的提取

     建立base.css

2.css2d转换

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

     //位移
translate(x,y)
//旋转
rotate()
//缩放
scale(x,y)
//倾斜
skew(x,y)
配合transform属性使用

3.再说垂直水平居中

     <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;

4旋转rotate

     div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

    缩放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); 标准语法 

     倾斜skew(x,y) 方法
x表示水平方向,y表示垂直方向
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); 
-webkit-transform: skew(30deg,20deg);  Safari and Chrome 
}

5transition过渡

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

不会什么

图片旋转值得设定