transform

使用方式：

div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

旋转180°

.is-rotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

更多使用方式：

/* Keyword values */
transform: none;  /* 无转换 */

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); /* 2D 转换，使用六个值的矩阵 */
transform: translate(12px, 50%);  /* 2D 转换 */
transform: translateX(2em);  /* 转换，只是用 X 轴的值 */
transform: translateY(3in);  /* 转换，只是用 Y 轴的值 */
transform: scale(2, 0.5);  /* 2D 缩放转换 */
transform: scaleX(2);  /* 设置 X 轴的值来定义缩放转换 */
transform: scaleY(0.5);  /* 设置 Y 轴的值来定义缩放转换 */
transform: rotate(0.5turn);  /* 2D 旋转，在参数中规定角度 */
transform: skew(30deg, 20deg);  /* 沿着 X 和 Y 轴的 2D 倾斜转换 */
transform: skewX(30deg);  /* 沿着 X 轴的 2D 倾斜转换 */
transform: skewY(1.07rad);  /* 沿着 Y 轴的 2D 倾斜转换 */
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);  /*  3D 转换，使用 16 个值的 4x4 矩阵 */
transform: translate3d(12px, 50%, 3em);  /* 3D 转换 */
transform: translateZ(2px);  /* 3D 转换，只是用 Z 轴的值 */
transform: scale3d(2.5, 1.2, 0.3);  /* 3D 缩放转换 */
transform: scaleZ(0.3);  /* 设置 Z 轴的值来定义 3D 缩放转换 */
transform: rotate3d(1, 2.0, 3.0, 10deg);  /* 3D 旋转 */
transform: rotateX(10deg);  /* 沿着 X 轴的 3D 旋转 */
transform: rotateY(10deg);  /* 沿着 Y 轴的 3D 旋转 */
transform: rotateZ(10deg);  /* 沿着 Z 轴的 3D 旋转 */
transform: perspective(17px);  /* 为 3D 转换元素定义透视视图 */

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);  /* 同时指定多个转换函数 */

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

语法格式

none | <transform-list>
where 
<transform-list> = <transform-function>+

where 
<transform-function> = <matrix()> | <translate()> | <translateX()> | <translateY()> | <scale()> | <scaleX()> | <scaleY()> | <rotate()> | <skew()> | <skewX()> | <skewY()> | <matrix3d()> | <translate3d()> | <translateZ()> | <scale3d()> | <scaleZ()> | <rotate3d()> | <rotateX()> | <rotateY()> | <rotateZ()> | <perspective()>

where 
<matrix()> = matrix( <number>#{6} )
<translate()> = translate( <length-percentage> , <length-percentage>? )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
<scale()> = scale( <number> , <number>? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
<rotate()> = rotate( [ <angle> | <zero> ] )
<skew()> = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
<skewX()> = skewX( [ <angle> | <zero> ] )
<skewY()> = skewY( [ <angle> | <zero> ] )
<matrix3d()> = matrix3d( <number>#{16} )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )
<rotateX()> = rotateX( [ <angle> | <zero> ] )
<rotateY()> = rotateY( [ <angle> | <zero> ] )
<rotateZ()> = rotateZ( [ <angle> | <zero> ] )
<perspective()> = perspective( <length> )

where 
<length-percentage> = <length> | <percentage>