鼠标移上蓝色方块查看demo效果
请使用高富帅浏览器：chrome浏览器、firefox浏览器、opera浏览器

rotate-a
rotate-b

rotate就是基于角度转动一个对象并可用于内联元素和块级元素。

如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。

 

rotate-a：顺时针旋转45°

rotate-b：逆时针旋转45°

 

 

scale-a
scale-b
scale-c

scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）,scaleX(x)元素仅水平方向缩放（X轴缩放）,scaleY(y)元素仅垂直方向缩放（Y轴缩放）。

x,y高两个值可以是正数、负数和小数。

x,y为负数，则表示翻转。

 

scale-a：宽高放大1.5倍

scale-b：宽放大1.5倍，高不变

scale-c：宽放大1.5倍并水平反转，高不变

translate-a
translate-b
translate-c

translate就是基于X和Y坐标重新定位元素。

translate(x,y)水平方向和垂直方向同时重新定位，也可以仅translateX(x)水平方向（X轴）重新定位，或translateY(y)垂直方向（Y轴）重新定位。

x,y值可以是正数、负数。

 

translate-a：重新定位Y=50px

translate-b：重新定位Y=50px

translate-c：重新定位Y=50px

skew-a
skew-b
skew-c

skew有三种情况：skew(x,y)使元素在水平和垂直方向同时扭曲，skewX(x)仅使元素在水平方向扭曲变形，skewY(y)仅使元素在垂直方向扭曲变形。

x,y值可以是正数、负数。

 

skew-a：X轴扭曲20deg

skew-b：Y轴扭曲20deg

skew-c：X轴扭曲-20deg，Y轴扭曲20deg