【夯基石】-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的关键。

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

这是一个参考链接