transform
transform : none | < transform - function > +
transform : none 不做变形的更换
transform : < transform - function > +
< body style = " transform : rptate(180deg)" > 图片到过来180°
rotate () 旋转
rotate(<angle>)
transform : rotate(45deg); transform : rotate(-60deg);
translate() 移动
translate ( < translation - value > [ , <translation-value> ] ?) ?表示可以不写
---------------------------------------------
translateX( < translation - value>)
translateY( <translation - value>)
scale() 缩放
scale(<number> [, number>] ? ) 第一值 同样代表x轴 第二个值同样代表y轴 第二个值可以不写 ,不写的时候就是第一个值
--------------------------------------------
scale X (<number > )
scale Y (<number > )
skew() 倾斜
skew ( < angle> [ , <angle > ] ? ) 第一个值表示往y轴向x轴倾斜多少° 第二个值是x轴往y轴倾斜多少°
skewX( <angle>)
skewY( <angle>)
位置进行偏移并进行旋转
transform : < transform - function> +
transform : translate(50%) rotate(45deg);
transform : rotate(45deg) translate(50%);
以左上角为顶点 ,做旋转
transform - origin
transform - origin :
[ left | center | right | top | bottom | <percentage > | < length> ] 关键字
|
[ left | center | right | < percentage > | < length > ] x方向
[ top | center | bottom | <percentage > | <length > ] <length> ? y方向 z方向
|
[ center | [ left | right ]] && [ center | [ top | bottom ]] <length>? 关键字