transformを複数指定する場合の順番

こんにちは。

今日は【transform】プロパティにおける注意点について書こうと思います。

先日、矢印でよくみるデザインで「＞」をCSSで作る方法を勉強しました。

以下のような感じです＾＾

CSSではtransformプロパティを使い、scale（拡大縮小）,translate（移動）,rotate（回転）の3つの値を指定します。

しかし、記述には注意が必要で値の順番に気をつけないと思った通りの形にならないということに気付きました(^^;

ではさっそくコードを見ていきましょう！

コード

HTML編

<div class="btn">
<span class="icn">ボタン</span>
</div>

※ボタンに大体ある<a>タグは省略しています

CSS編

              .icn {
                position: relative;
                display: inline-block;
                padding-right: 1.5em;
                }
              .icn:before
                {
                 position: absolute;
                 top: 50%;
                 right: 0;
                 content: "";
                 
                 width: .7em;
                 height: .7em;
                 border: solid #505050;
                 border-width: 2px 2px 0 0;
                 transform:translateY(-50%) scaleY(0.6) rotate(45deg);
                }
              

擬似要素で正方形をつくり、ボーダーの上辺、右辺を使います＾＾

※イメージです

これをtransformプロパティで変形させていきます！

1. 図形の縦位置を天地中央にするーtranslateY(-50%)
2. 45度回転させるーrotate(45deg)
3. 直角ではなく少し鋭角な矢印を作るために縦方向に図形を少し縮小させるーscaleY(0.6)

で、今回の注意点として、順番でしたよね。

試しにrotateとscaleの位置を変えてみたところ、

このような形になりました(^^;

他にもtranslateの位置を後ろにしたら天地中央にならなかったり・・・

綺麗な形になったのが上記の順番でした！！

どうも、記述した順番に変形するみたいです。

個人的には、それならrotate→scaleの順番のほうががうまくいくんじゃないか？と思ったのですが、そこはうーーーんです。笑

まとめ

transformを使う際には値の記述順に気をつけないといけないということが分かりました。

参考になれば幸いです！

では今日はここまで〜〜