好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

深入理解CSS变形transform(2d)_html/css_WEB-ITnose

× 目录 [1]变形原点 [2]变形函数 [3]多值

前面的话

  [注意]x>0时,表示y轴向x轴正方向倾斜;x

  [注意]y>0时,表示x轴向y轴正方向倾斜;y

skewX(x) 相当于 skew(x,0)

  x表示y轴向x轴倾斜的角度

skewY(y) 相当于 skew(0,y)

  y表示x轴向y轴倾斜的角度

  [注意]倾斜函数相当于matrix(1,tany,tanx,1,0,0)

旋转

  rotate旋转函数可以让元素通过指定的角度(deg)根据变形原点进行顺时针旋转,默认为0deg。与skew不同的是,rotate不会改变元素的形状。涉及到旋转的2d函数只有一个,就是rotate()

  [注意]元素旋转后,元素的x轴和y轴也跟着发生旋转。若元素要进行其他变形操作,则沿着旋转后的x轴和y轴进行变形

rotate(Ndeg)

  [注意]当N为正数时,元素进行顺时针旋转;当N为负数时,元素进行逆时针旋转

  [注意]旋转函数相当于matrix(cosN,sinN,-sinN,cosN,0,0)

多值

  transform变形可以接受多值,出现多个变形函数时用空格分隔,并且按照从前往后的顺序执行。

transform:      ... 

【1】多个变形函数的先后关系可以转换为多个元素的嵌套关系

查看更多关于深入理解CSS变形transform(2d)_html/css_WEB-ITnose的详细内容...

  阅读:70次