Fork me on GitHub

CSS3 transform属性及其matrix矩阵学习

前言

最近做的一个小网页里需要写一个小转盘,在获取旋转角度时,发现transform的返回值是一段奇怪的参数,后来多方查阅后才了解,返回值是一个matrix()矩阵,matrix()这个东西,其实表示的是使元素发生变化的本质…

首先回顾transform属性的相关知识

先理解网页上的x,y轴

xy轴.png

transform属性

1.偏移

  • transform: translate(x,y) :移动元素位置,x,y为水平和竖直移动的距离,单位是px
  • translateX(x) 定义转换,只是用 X 轴的值。 测试
  • translateY(y) 定义转换,只是用 Y 轴的值。 测试
  • translateZ(z)

2.旋转

  • transform: rotate(x deg):2D旋转x度,正值顺时针转,负值逆
  • 3D旋转
    • rotateX()
    • rotateY()
    • rotateZ()
  • 默认旋转的基点是元素中心点

3.倾斜

  • transform: skew(x deg,y deg):2D倾斜,x,y为沿x,y轴倾斜的角度
  • skewX()
  • skewY()
  • skew默认旋转的基点是中心点
  • 当倾斜的角度大于45度时,实际看到的元素是反过来的,无论怎么倾斜,元素在x,y轴的投影与原始宽高一致,所以元素才会变形

skew.png
skew(60deg,60deg) 黄框为原始大小

4.缩放

  • transform: scale(x,y) :2D缩放,加参数z可3D缩放,x,y,z数值为缩放倍率如1.5
  • scaleX(x) 通过设置 X 轴的值来定义缩放
  • scaleY(y) 通过设置 Y 轴的值来定义缩放
  • scaleZ(z)

transform-origin属性

设置旋转的基点

  • transform-origin: x-axis y-axis z-axis;

  • x值可以是left/right,center,%,具体px

  • y值可以是top/bottom,center,%,具体px

  • z值自然为z轴的具体坐标

transform属性的matrix()

如果是2D变换,括号里就是6个值的矩阵,如果是3D变换,括号里就是4*4的16个值的矩阵,以下我们讨论的是2D变换

写法如下:

1
transform: matrix(a,b,c,d,e,f);

a,b,c,d,e,f的六个参数实际上对应的是一个矩阵

img

而如果要使元素的坐标变化,其中是实现原理如下:

img

x,y是元素的原坐标,ax+cy+e对应的是变换后的x轴坐标 x’ ,bx+dy+f对应的是变换后的y轴坐标 y’

  • 偏移(translate)

显然,在a,b,c,d值不改变的情况下,改变e,f的值就是改变 x’ ,
y’ 的常数项

所以,若只改变e,f的值,就相当于改变元素的偏移,(e,f)其实就是元素的中心点位置坐标

实际上也就是

1
transform: matrix(a, b, c, d, e, f);

相当于

1
transform: translate(e px, f px);
  • 缩放(scale)

再观察矩阵的式子,缩放就是改变x,y的系数的倍数

显然,若改变x系数倍数而不改变y系数,则只改变a的值

同理,改变y则需只改变d的值

所以

1
transform: matrix(a, 0, 0, d, 0, 0);

相当于

1
transform: scale(a, d);
  • 旋转(rotate)

旋转相对复杂些,涉及到三角函数的变换,与a,b,c,d参数有关

1
transform: matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

矩阵变换实际长这样

img

所以

1
transform: matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

相当于

1
transform: transform:rotate(θ化为弧度制 deg);

若需要获取元素的rotate(θ)的旋转角度θ,则需要利用返回值中的参数值cosθ与sinθ

问题也就转化为:已知sinθ和cosθ,求θ值。这里就需要用到反三角函数了,是个数学问题。

  • 倾斜(skew)

倾斜也涉及三角函数,不过只改变的是tanθ的值,只与b,c参数有关,方法如下:

1
transform: matrix(1,tany),tanx),1,0,0)

利用矩阵运算后的结果:

x’ = x+ytan(θx)+0 = x+ytan(θx)

y’ = xtan(θy)+y+0 = xtan(θy)+y

所以

1
transform: matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

相当于

1
transform: rotate(θ化为弧度制deg);
  • matrix()的优点

相比translate、scale、rotate、skew,matrix()可以实现镜像对称,其实原理就是相对于y=tanθ x直线进行翻转,下面是具体方法(k=θ)

1
transform: matrix((1-k*k) / (1+k*k), 2k / (1 + k*k), 2k / (1 + k*k), (k*k - 1) / (1+k*k), 0, 0)
-------------Page's overThanks for reading-------------

本文标题:CSS3 transform属性及其matrix矩阵学习

本文作者:SherlockYang

发布时间:2018年10月23日 - 00:10

最后更新:2019年10月11日 - 23:10

原始链接:https://sherlock-y.com/2018/10/23/对CSS3 transform属性的学习/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

如果文章内容对你有帮助,就赏博主一瓶维他奶吧~