Help us understand the problem. What is going on with this article?

CSS transformは順番にご注意を

More than 1 year has passed since last update.

基本

CSSでは、transform属性に複数の変換関数をつなげることができる。その際、関数は左から右に順番に適用される。transformは2次元、もしくは3次元のアフィン変換である。つまりどういうことかというと、こういうことである。

たとえば以下のようなCSSがあると仮定しよう。

transform.css
.transform {
  transform: rotate(90deg) scale(2);
}

この時、座標(x,y)について、以下のような計算を行う。

V = \begin{pmatrix}
2 & 0 & 0 \\
0 & 2 & 0 \\
0 & 0 & 1
\end{pmatrix} \begin{pmatrix}
\cos(90°) & -\sin(90°) & 0 \\
\sin(90°) & \cos(90°) & 0 \\
0 & 0 & 1
\end{pmatrix} \begin{pmatrix}
x \\
y \\
1
\end{pmatrix}

これにより求まった(x,y)がその地点が変換されて置かれる座標である。

なお、べた書きで行列を記述することも可能であるが、何が起きるか直感でわからない(=メンテナンスできない)からやめたほうがよい。

本題

transformは複数の変換関数をつなげることができるのだが、線形代数をやっている人にはわかると思うが、基本的に交換法則が成立しないという点に留意する必要がある。
交換法則が成り立つためには、ややこしい条件1が必要だが、2D transformに関して言えば、rotateとscaleの間、およびtranslate相互間については交換法則が成立する。
つまり、たとえば以下のようなCSSがあったとする。

sample.css
.test {
  transform: translate(20px,30px) rotate(45deg) scale(1.5) rotate(-15deg) scale(3) translate(10px,5px) translate(-20px,0) scale(2);
}

このようなCSSがある場合、こんな感じに交換できる。

sample2.css
.test {
  transform: translate(20px,30px) rotate(45deg) rotate(-15deg) scale(1.5) scale(3) translate(10px,5px) translate(-20px,0) scale(2);
}

簡単な行列計算で、rotate同士は角度の合算ができ、scaleは倍率が乗算ができる。また、translateは各座標値の合算ができるので、結局こうなる。

sample3.css
.test {
  transform: translate(20px,30px) rotate(30deg) scale(4.5) translate(-10px,5px) scale(2);
}

これ以上の簡略化はできないという点に注意せよ(translateとscale、translateとrotateの間には交換法則が成立しないため)。


  1. つまり、変換行列が$A$と$B$であるとする。その時にこの2つの行列が可換であるための必要十分条件はこの2つに、$P^{-1}AP$と$P^{-1}BP$がどちらも対角行列になる共通なある正則行列(逆行列が存在する行列)$P$が存在することである。 

MH35JP
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away