画像や動画の基準点を変更する方法

今回は画像や動画を拡大縮小する時や、回転させる時の基準点とその基準点の変更方法をお伝えしていきたいと思います。画像や動画の可変の際に思ったように可変してくれない場合に、基準点を変更すると解決する場合もあるので、是非参考にしていただければと思います。

基準点を変更する方法

まず画像や動画の基準点ですが、初期状態では左上の端が基準点となっています。
関数などで使う0,0座標です。

この基準点をもとに画像や動画は、拡大縮小や回転が行われます。
しかしこの基準点で回転などを行うと、思ったように回転してくれないなど不便な場合がございます。

そこで基準点を中央に変更すると、画像の中心を基準点として回転してくれるようになるのです。
ではどのように変更するかというと、下記コードを参考にしていただければと思います。

transform: translateX(-50%);
transform: translateY(-50%);

説明をいたしますと、X座標を-50%、Y座標を-50％に変更することによって、画像の基準点を中央にすることができます。また参考に四隅それぞれの基準点は下記のように設定します。

動画をメインイメージ使う場合に活用できる

この基準点の変更ですが、動画をメインイメージにした場合に活用できます。
横幅100%表示（ウィンドウ幅）で高さが固定値（例：540px）で制限のある場合、動画を設置した左上基準で可変されていき、アスペクト比の兼ね合いで、動画の高さが足りなくなってしまいます。細かいブレイクポイントを作成して、動画の配置を調整してもギコチない可変になってしまい、見栄えが悪くなってしまいます。

しかし動画の基準点を中央に変更していると、アスペクト比の影響しなくなるので、なだらかに常に中央を基準とした動画の可変が可能となるのです。

画像や動画の基準点を変更する方法まとめ

画像や動画の基準点を変更する方法について紹介してきました。
文字でだらだら説明してみましたが、実際に動画などで試してみると納得していただけるでしょう。

基準点の変更は頻繁に使うことはありませんが、この変更方法を知っているといざ厄介な可変サイトを構築する時に活用できるので、是非知っておく良いと思います。