css3的变形效果也叫变换。它可以将元素实现旋转、缩放和平移的功能。属性有两个:transform(指定应用的变换功能)和transform- origin(指定变换的起点)
一、transform的属性值:
none——无变换
translate()、translateX()、translateY()——在两个方向或水平方向、垂直方向平移元素。括号里填入长度值或百分数值
scale()、scaleX()、scaleY()——在两个方向或水平方向、垂直方向缩放元素。括号里填入数值,大于1放大,小于1缩小
rotate()——旋转元素,括号里填入角度,正值逆时针,负值顺时针
skew()、skewX()、 skewY()—— 在两个方向或水平方向、垂直方向上使元素倾斜一定的角度。括号里填入角度
matrix()——指定自定义变换。括号里填入4~6数值,用逗号隔开
二、transform- origin属性值
百分数值——指定元素x轴或y轴的起点
长度值——指定距离
left、center、right——指定x轴的位置
top、center、bottom——指定y轴的位置