transform-originを使って変形の起点を変更する方法を見ていきます。

• transform-origin

transform-origin

・図形のアニメーションの起点を変えて、例えば左上を中心に30度右回りに回転させる方法について見ていきます。

・まずはホバーしたときに30度回転するようにtransform: rotate(30deg);としていきます。デフォルトだと図形の中心を基点に回転します。

・もしここで、起点を変更したい場合 box のほうに transform-origin プロパティを設定してあげます。たとえば、図形の左上を起点に回転させたい場合、このように top left と書いてあげれば OK です。

・transform-origin プロパティは変形後にだけ指定したいというわけではないので、.animation:hoverではなく、.animationに書く点に注意しておいてください。

・また、scale()についても同様に起点をコントロールすることが出来ますが、translate()はどこを基準にしても単に平行移動するだけなので、 transform-origin の影響を受けることはありません。

-広告-

Anker PowerExpand Direct 7-in-2 USB-C PD メディア ハブ 4K対応 HDMIポート 100W出力 Power Delivery 対応 Thunderbolt 3 USB-Cポート USB-A ポート microSD & SDカード スロット搭載 価格：5999円（税込、送料無料) (2020/10/2時点) 楽天で購入

PD 充電器 RAVPower Type C 急速充電器 90W【GaN (窒化ガリウム)採用/2ポート/折畳式/PD対応/PSE認証済】iPhone 11/11 Pro/11 Pro Ma 価格：7329円（税込、送料無料) (2020/10/2時点) 楽天で購入