CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでtransform-originプロパティをアニメーションさせる方法

CSSでは、transform-originプロパティも他のプロパティと同様に、@keyframesルールを使ってアニメーションさせることができます。

transform-originは、要素が回転や拡大縮小を行う際の基準点(原点)を指定するプロパティです。デフォルトでは要素の中心が基準点になりますが、この位置をアニメーションで変化させることで、回転しながら軸が移動していくようなダイナミックな演出を実現できます。

実装例

以下のコードは、オレンジ色のボックスを45度回転させた状態で、transform-originを「30% 10%」から「0 0」へと3秒かけて連続的に変化させる例です。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo1 {
            position: relative;
            height: 300px;
            width: 400px;
            border: 2px solid black;
            margin: 100px;
            padding: 5px;
         }
         #demo2 {
            padding: 30px;
            position: absolute;
            border: 1px solid black;
            background-color: orange;
            transform: rotate(45deg);
            transform-origin: 30% 10%;
            animation: mymove 3s infinite;
         }
         @keyframes mymove {
            30% {
               transform-origin: 0 0 0;
            }
         }
      </style>
   </head>
   <body>
      <h1>CSS transform-origin property</h1>
      <div id = "demo1">
         <div id="demo2">Demo</div>
      </div>
   </body>
</html>

コードのポイント

  • #demo1: 外側のコンテナ。黒い枠線を持つ幅400px・高さ300pxの領域で、アニメーションの土台となります。
  • #demo2: アニメーションの対象となる内側のボックス。position: absoluteで配置され、初期状態ではrotate(45deg)によって45度回転しています。
  • transform-origin: 30% 10%: 回転の基準点を、要素の左上を起点として横方向に30%、縦方向に10%の位置に設定しています。
  • @keyframes mymove: アニメーションの進行が30%に達した時点で、基準点を「0 0 0」(左上隅)へ移動させます。
  • animation: mymove 3s infinite: 3秒間のアニメーションを無限に繰り返し再生します。

このコードをブラウザで表示すると、回転したボックスの基準点がスムーズに移動していく様子を確認できます。基準点の移動に合わせて回転の挙動も変化するため、transform-originが要素の変形にどのような影響を与えるのかを視覚的に理解するのに最適なサンプルです。

  1. CSSアニメーションでtransformプロパティをアニメーション化する方法

    CSSを使えば、transform プロパティにも簡単にアニメーションを適用できます。transform をアニメーション化することで、要素の回転・移動・拡大縮小などを滑らかで軽量な演出として表現可能です。ここでは、@keyframes と animation プロパティを組み合わせた基本的な実装方法を解説します。 実装のポイント @keyframes：アニメーションの進行度ごとに適用するスタイル（キーフレーム）を定義します。 animation：アニメーション名や再生時間（duration）などをまとめて指定できるショートハンドプロパティです。 transform：キーフレーム内で rot

  2. CSSアニメーションでvertical-alignプロパティを動かす方法を解説

    CSSのvertical-alignプロパティは、インライン要素やテーブルセル内のコンテンツの垂直方向の位置を揃えるために使われます。実は、このプロパティもCSSアニメーション（@keyframes）と組み合わせることで、滑らかにアニメーションさせることが可能です。以下のサンプルコードでは、画像のvertical-alignの値を3秒かけて変化させるアニメーションを実装しています。アニメーションの途中（50%の時点）で値が120pxに変化するように設定しています。サンプルコード<!DOCTYPE html> <html>    <head>