简介

今天在做一个抽奖demo时,突然发现自己对变换属性(transform)理解的不是很到位,于是各种翻阅资料,总算是理清了一些思路,故在此总结一下心得.

内容

首先先介绍一些transform属性,在此我只针对rotate(),translate(),scale()这三个参数进行分析,其余的以后会再说.

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

• translate (位移)

  translate主要用于改变元素的在坐标系上的偏移量.

  • translateX
    translateX()可以改变元素在x轴上的偏移量.例如下图:
  translateX.png
  • translateY

  translateY()可以改变元素在Y轴上的偏移量.例如下图:

  translateY.png
  • translateZ

  translateZ()可以改变元素在Z轴上的偏移量.例如下图:

  translateZ.png

  translateZ属于3D变换范畴,在此我只做简单介绍,
  我会在后续的笔记中做一个关于3D变换的总结.
  

• rotate (旋转)

  rotate可以再在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。单位是deg(度)

  • rotateX
    rotateX()可以使元素沿着x轴旋转,例图如下:
  rotateX.png
  • rotateY
    rotateY()可以使元素沿着Y轴旋转,例图如下:
  rotateY.png
  • rotateZ
    rotateZ()可以使元素沿着Z轴旋转,例图如下:
  rotateZ.png

tip: rotate()和rotateZ()效果是相同的,
区别在于rotate适用于2D旋转,而rotateZ
适用于3D旋转中. 可以互相替换,但不建议这样.

• scale (缩放)
  scale定义了元素的缩放转换,可以增加或减少元素的大小.并且以初始状态为1.

  • scaleX

  scaleX()通过设置 X 轴的值来定义缩放转换。可以简单的认为是改变宽度的大小. 例图如下:

  scaleX.png
  • scaleY
    scaleY()通过设置Y轴的值来定义缩放转换。可以简单的认为是改变高度的大小
    例图如下:
  scaleY.png

关于scaleZ()我将写入有关3d变换总结的笔记中, 所以在此不继续介绍了 .

tip: 关于它们混合使用,我要强调一下,因为rotate() 是靠旋转坐标轴来改变元素的. 所以translate() 和rotate()混合 使用时,会因其顺序位置而有所不同.例图如下:

 transform: translateX(50px) rotateZ(45deg);

tx50-rz45.png

  transform: rotateZ(45deg) translateX(50px) ;

rz45-tx50.png

总结

依旧是关于translate和rotate的混合使用,我说一下自己的理解,rotateZ()就是Z轴固定不动,x轴和y轴所构成的面绕着z轴旋转.x轴,y轴都会改变.其他情况我没有做详细的测试,你们可以自己做个例子试试看.额......我本想画个图来描述一下,奈何本人不会使用画图工具,不过日后我会把这个图补上的,还请多包涵.