【夯基石】-CSS2D转换

css2D转换-transform

界面设计好会让人觉得这个软件好用,这应该是一个真理!

translate() 方法

translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。

1 translateX(n) 定义 2D 转换,沿着 X 轴移动元素。 2 translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。

translate(10px,20px)是元素从左边向右 移动10个像素,并从顶部向下 移动20像素。

rotate() 方法

rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。

rotate(30deg)元素顺时针旋转30度;rotate(-30deg)元素逆时针旋转30度。

scale() 方法

scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数

1 scaleX(n) 定义 2D 缩放转换,改变元素的宽度。

2 scaleY(n) 定义 2D 缩放转换,改变元素的高度。

scale(.5,3)转变宽度为原来的大小的一半,和其原始大小3倍的高度。

skew() 方法

包含两个参数值,分别表示Y轴和X轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。

1 skewX();表示只在X轴(水平方向)倾斜。

2 skewY();表示只在Y轴(垂直方向)倾斜。

skew(30deg,20deg) 元素在Y轴和X轴上倾斜30度20度。

matrix() 方法

matrix()方法和2D变换方法合并成一个。matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。使用6个值的矩阵

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

这货对应的矩阵如下图展示:

当使用这货对元素进行css设置的时候,他要经历一场如下图所示的计算

希望我们还没有蒙圈,上图中x, y是表示元素坐标中心点位置,ax+cy+e为变换后的水平坐标,bx+dy+f表示变换后的垂直坐标。

也就是说,矩阵中参数e和f控制着元素的偏移,下面开个玩笑

transform: matrix(什么鬼, 应该是bug, 那一起打, 行啊打死吧, 水平偏移距离, 垂直偏移距离);

那么谁又控制缩放(scale)呢,简单说一下就是a和d,a缩放x轴,d缩放y轴,假设比例是w,matrix(w, 0, 0, w, 0, 0)套公式就是:

x' = ax+cy+e = sx+0y+0 = sx;

y' = bx+dy+f = 0x+sy+0 = sy;

接下来,我们看旋转(rotate),二货不多说,先看公式:matrix(cosθ,sinθ,-sinθ,cosθ,0,0),θ就是那个旋转的角度:

x' = xcosθ-ysinθ+0 = xcosθ-ysinθ

y' = xsinθ+ycosθ+0 = xsinθ+ycosθ

最后,拉伸(skew),隆重登场matrix(1,tan(θy),tan(θx),1,0,0),对应于skew(θx + "deg",θy+ "deg")这种写法。其中,θx表示x轴倾斜的角度,θy表示y轴,两者并无关联:

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

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

原理-坐标系统

看下图,坐标系统的中心点是transform的关键。

矩阵就介绍到这里,泪流满面,宝宝要去补数学知识了,谁也别拦我。

这是一个参考链接

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180625G06CY300?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券