关于 CSS 变换顺序的混淆答案

【问题标题】：Confusion about the order of CSS transform关于 CSS 变换顺序的混淆
【发布时间】：2015-04-23 17:12:00
【问题描述】：

全部：

当我尝试 CSS 变换时，关于缩放顺序和翻译的一些东西让我感到困惑：

<svg>
    <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"/>
    <rect x="0" y="0" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2) translate(10, 10)"/>
</svg>


<svg>
    <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"/>
    <rect x="0" y="0" width="20" height="30" style="stroke: #000000; fill:none;" transform="translate(10, 10) scale(2)"/>
</svg>

这两个产生不同的效果。谁能给我一些关于如何处理和呈现 CSS 转换的解释？

谢谢

【问题讨论】：

这两个产生不同的效果。 我在 jsfiddle 中看到了两次相同的东西：一个黑色矩形与位于左上角的一个小紫色矩形重叠。您能否详细说明您所看到的与您期望看到的？
@BSMP 对不起，我的错。我编辑我的问题。第二个svg中的变换属性应该是“translate(10, 10) scale(2)”而不是“scale(2) translate(10, 10)”

标签： css matrix transform

【解决方案1】：

来自W3C

x = "" 当前用户坐标系中x轴坐标值较小的矩形边的x轴坐标。

和Mozilla Developer Network:

该属性表示用户坐标中的一个x轴坐标系统。此坐标的确切效果取决于每个元素。

它们看起来不一样的原因是缩放元素也缩放了用户坐标系。

我添加了另外两个 SVG 元素，这样我们就可以看到它在应用第一个变换后的样子。

<svg>
    <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"/>
    <rect x="0" y="0" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2)"/>
</svg>

<svg>
    <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"/>
    <rect x="0" y="0" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2) translate(10, 10)"/>
</svg>


<svg>
    <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"/>
    <rect x="0" y="0" width="20" height="30" style="stroke: #000000; fill:none;" transform="translate(10, 10)"/>
</svg>


<svg>
    <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"/>
    <rect x="0" y="0" width="20" height="30" style="stroke: #000000; fill:none;" transform="translate(10, 10) scale(2)"/>
</svg>

在第一个中，首先应用比例。现在矩形和用户坐标系都是紫色矩形的 2 倍。因此，当它移动到 10,10 时，它与紫色矩形的位置不同。

在第二个中，矩形首先移动。它与紫色矩形具有相同的坐标系，因此最终位于完全相同的位置。它然后被缩放，所以它的左上角保持在同一个地方。

【讨论】：

【解决方案2】：

每一个像scale、translate这样的变换函数都代表一个矩阵。并且矩阵连接/乘法不是可交换的。所以 M1 x M2 一定不等于 M2 x M1。

例如一个缩放矩阵（列主序），scale(2, 2)：

m11=2.000   m21=0.000   m31=0.000
m12=0.000   m22=2.000   m32=0.000
m13=0.000   m23=0.000   m33=1.000

例如平移矩阵 translate(10, 10)：

m11=1.000   m21=0.000   m31=10.000
m12=0.000   m22=1.000   m32=10.000
m13=0.000   m23=0.000   m33=1.000

缩放 * 平移：

m11=2.000   m21=0.000   m31=20.000
m12=0.000   m22=2.000   m32=20.000
m13=0.000   m23=0.000   m33=1.000

翻译 * 比例：

m11=2.000   m21=0.000   m31=10.000
m12=0.000   m22=2.000   m32=10.000
m13=0.000   m23=0.000   m33=1.000

【讨论】：

scale(t) 肯定是矩阵变换(t 0; 0 t)，但是平移是添加一个向量，它不能（通常，零向量是一个微不足道的情况，它相当于转换单位矩阵）表示为矩阵变换。
@Robin，你说的是 2x2 矩阵吗？那只是矩阵的线性部分。上面提到的矩阵是一个3x3的矩阵（包括透视的东西->最后一行，和翻译->最后一列）。
我想我跟着你。在这个公式中，我们是否用列向量(x ; y ; 1) 表示位置(x,y)？这是一个很好的解释，包括矩阵，赞。