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