A.今天学了什么
1.公共样式的提取
<link href="css/base.css" type="text/css" rel="stylesheet" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
2css2d转换
transform:translate(x,y) rotate(30deg)
//位移
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 */
}
再说垂直水平居中
/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;
}
多项改变
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.公共样式的提取
<link href="css/base.css" type="text/css" rel="stylesheet" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
2css2d转换
transform:translate(x,y) rotate(30deg)
//位移
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 */
}
再说垂直水平居中
/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;
}
多项改变
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.今天没掌握什么
能掌握，但要多练练
