CSS 6 变形 ①

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>?    关键字

  

  

猜你喜欢

转载自www.cnblogs.com/hzaixt/p/9311084.html
今日推荐