Web开发笔记之transform(一)

简介

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

内容

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

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

  • translate (位移)

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

    • translateX
      translateX()可以改变元素在x轴上的偏移量.例如下图:
    Web开发笔记之transform(一)_第1张图片
    translateX.png
    • translateY

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

    Web开发笔记之transform(一)_第2张图片
    translateY.png
    • translateZ

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

    Web开发笔记之transform(一)_第3张图片
    translateZ.png
    translateZ属于3D变换范畴,在此我只做简单介绍,
    我会在后续的笔记中做一个关于3D变换的总结.
    
  • rotate (旋转)

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

    • rotateX
      rotateX()可以使元素沿着x轴旋转,例图如下:
    Web开发笔记之transform(一)_第4张图片
    rotateX.png
    • rotateY
      rotateY()可以使元素沿着Y轴旋转,例图如下:
    Web开发笔记之transform(一)_第5张图片
    rotateY.png
    • rotateZ
      rotateZ()可以使元素沿着Z轴旋转,例图如下:
    Web开发笔记之transform(一)_第6张图片
    rotateZ.png
tip: rotate()和rotateZ()效果是相同的,
区别在于rotate适用于2D旋转,而rotateZ
适用于3D旋转中. 可以互相替换,但不建议这样.
  • scale (缩放)
    scale定义了元素的缩放转换,可以增加或减少元素的大小.并且以初始状态为1.

    • scaleX

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

    Web开发笔记之transform(一)_第7张图片
    scaleX.png
    • scaleY
      scaleY()通过设置Y轴的值来定义缩放转换。可以简单的认为是改变高度的大小
      例图如下:
    Web开发笔记之transform(一)_第8张图片
    scaleY.png

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



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

 transform: translateX(50px) rotateZ(45deg);
Web开发笔记之transform(一)_第9张图片
tx50-rz45.png
  transform: rotateZ(45deg) translateX(50px) ;
Web开发笔记之transform(一)_第10张图片
rz45-tx50.png

总结

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

你可能感兴趣的:(Web开发笔记之transform(一))