1.我今天学了什么

1.公共样式的提取

2.Css2D转换

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

2.1translate位移
该元素移动的位置，取决于宽度（X轴）和高度（Y)
translate(x,y)  x横坐标方向移动的距离,y纵坐标方向移动的距离div#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 */
}

.33transition过渡

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

2我掌握了什么

1.公共样式的提取

2.Css2D转换

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

2.1translate位移
该元素移动的位置，取决于宽度（X轴）和高度（Y)
translate(x,y)  x横坐标方向移动的距离,y纵坐标方向移动的距离div#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 */
}

.33transition过渡

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