css3变形效果

151 阅读1分钟

2D位移

  • transform:translate(x,y); 元素单位px 可以是负值
  • transform:translatex(x);
  • transform:translatey(y); QQ图片20220407175148.png

2D缩放

  • transform:scale(sx,sy); 元素单位none
  • transform:scalex(sx);
  • transform:scaley(sy); 1=不变,2=放大一倍,0.5=缩小一倍 QQ图片20220407181955.png

2D倾斜

  • transform:skew(ax,ay); 元素单位deg
  • transform:skewx(ax); 水平方向向左倾斜
  • transform:skewy(ay); 垂直方向向下倾斜 transform:skew(数值); 当只有一个数值时,是x轴方向向左的倾斜 QQ图片20220407182548.png

2D旋转

  • transform:rotate(a); 元素单位deg
  • a为正数时,从中心点向右旋转;
  • a为负数时,从中心点向左旋转。 QQ图片20220407183636.png

想让一个图片既移动,又放大,可以这样写吗?
transform:translate(x,y);
transform:scale(sx,sy);
答案:不可以,后台读取代码的时候,读到第二个认为是一个全新的transform语句,会覆盖第一个transform,所以需要用复合写法,不同的元素之间用空格隔开。