HTML5响应式网页设计——页面特效——平移、缩放、旋转、倾斜

变换属性：

属性	说明
transform	指定应用的变换功能
transform-origin	指定变换的起点

transform属性的值：

属性	说明
transform（<长度值或百分数值>）	指定在水平和垂直两个方向上平移元素
transformX（<长度值或百分数值>）	指定在水平方向上平移元素
transformY（<长度值或百分数值>）	指定下垂直方向上平移元素
scale(<数值>)	指定在水平和垂直两个方向上缩放元素
scaleX(<数值>	指定在水平方向上缩放元素
scaleY(<数值>	指定在垂直方向上缩放元素
rotate(<角度>)	旋转元素
skew(<角度>)	指定在水平和垂直两个方向上使用元素倾斜一定的角度
skewX(<角度>)	指定在水平方向上使元素倾斜一定的角度
skewY(<角度>)	指定在垂直方向上使元素倾斜一定的角度
matrix（4~6个数值，逗号隔开）	指定自定义变换

transform-origin属性的值：

属性	说明
<%>	指定元素X和Y轴的起点
<长度值>	指定距离
left、center、right	指定X轴上的位置
top、center、bottom	指定Y轴上的位置

注意：变换前的元素会保持它在文档流中的位置，后续的所有元素都会受到它的影响，经过变换的元素并不影响页面的布局，但它会位于页面剩余部分的一个新层次上，这就意味着这个新的元素可以覆盖后续的元素。
语法:transform:属性
css3中的角度单位：

属性	说明
deg	角度（degress）
grad	梯度（gradians）
rad	弧度（radinas）
turn	转、圈(turns)