CSS

 transform-originで動きの起点を変更しよう

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 の影響を受けることはありません。

-広告-

 

 






-CSS