CSS3 2D 转换

Question

translate() 方法

把元素向左侧移动 50 像素，向下移动 100 像素。

div{
  transform: translate(50px,100px);
  -ms-transform: translate(50px,100px);        /* IE 9 */
  -webkit-transform: translate(50px,100px);    /* Safari and Chrome */
  -o-transform: translate(50px,100px);        /* Opera */
  -moz-transform: translate(50px,100px);        /* Firefox */
}

rotate() 方法

把元素顺时针旋转 30 度。

div{
  transform: rotate(30deg);
  -ms-transform: rotate(30deg);        /* IE 9 */
  -webkit-transform: rotate(30deg);    /* Safari and Chrome */
  -o-transform: rotate(30deg);        /* Opera */
  -moz-transform: rotate(30deg);        /* Firefox */
}

scale() 方法

把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

div{
  transform: scale(2,4);
  -ms-transform: scale(2,4);    /* IE 9 */
  -webkit-transform: scale(2,4);    /* Safari 和 Chrome */
  -o-transform: scale(2,4);    /* Opera */
  -moz-transform: scale(2,4);    /* Firefox */
}

skew() 方法

y 轴逆时针转 30 度，x 轴顺时针转 20 度

div{
  transform: skew(30deg,20deg);
  -ms-transform: skew(30deg,20deg);    /* IE 9 */
  -webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */
  -o-transform: skew(30deg,20deg);    /* Opera */
  -moz-transform: skew(30deg,20deg);    /* Firefox */
}

其他写法

translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。