CSS 2D转换

CSS 2D转换可对元素进行平面旋转、平移、倾斜、缩放等操作。

translate( ) ：从当前位置向X轴和Y轴平移指定距离；

//将div元素向X正轴平移100px，向Y正轴平移200px;

div {
  transform: translate(100px, 200px);
}

//将div元素向X正轴平移100px；

div {

   transform: translate(100px);

}

//负数为X或Y轴负轴方向

//将div元素向X负轴平移-100px，向Y负轴平移-200px;

div {
  transform: translate(-100px, -200px);
}

rotate( ) ：将指定元素顺时针或逆时针旋转指定角度（默认以元素中心为旋转中心）；

//将元素顺时针旋转90度；

div {
  transform: rotate(90deg);
}

//负数为逆时针

//将元素顺时针旋转90度；

div {
  transform: rotate(90deg);
}

scale(参数1，参数2) ：将指定元素按照指定参数的放大或缩小；

scaleX（参数）：将指定元素的宽度按照参数放大或缩小；

scaleX（参数）：将指定元素的高度按照参数放大或缩小；

//将宽度扩大到原来的两倍；

transform: scaleX(2);

//或transiform: scale(2,1);

//将高度扩大到原来的两倍；

transform: scaleY(2);

//或transiform: scale(1,2);

//将宽度缩小为原来的0.5倍；

transform: scaleX(0.5);

//或transiform: scale(0.5,1);

//将高度缩小为原来的0.5倍；

transform: scaleY(0.5);

//或transiform: scale(1，0.5);

//将元素的高和宽变为原先的两倍

transform: scale(2)

//注：当 '参数1' 为负数时，表示以元素中心为原点做坐标轴，以Y轴为轴将元素旋转180度。

         当 '参数2' 为负数时，表示以元素中心为原点做坐标轴，以X轴为轴将元素旋转180度。

skew(参数1，参数2) ：将指定元素向X轴或Y轴倾斜的角度，参数为负表示向相反方向倾斜；（参数1为沿X轴倾斜给定的角度，参数2为沿Y轴倾斜给定的角度，只有一个参数时，默认是沿X轴倾斜）

skewX( )：表示沿X轴倾斜给定的角度。

skewY( ) ：表示沿Y周倾斜给定的角度在。

//沿X轴倾斜30度

transform : skewX(30deg);

transform : skew(30deg); 

//沿Y轴倾斜40度

transfome : skewY(40deg);

//沿X轴倾斜30度,沿Y轴倾斜40度

transform : skew(30deg,40deg);

matrix( )方法：将所以2D方法组合起来使用；

matrix( scaleX() , skewY() , skewX() , scaleY() , translateX() , translateY() )