@keyframes ルールでアニメーション作成

CSSで複数の変換を適用する方法

複数の変換を適用するには、いくつかの方法があります。

カンマ区切り

最も簡単な方法は、カンマで区切って複数の変換を指定することです。例えば、以下のコードは、要素を45度回転し、10px右に移動します。

.element {
  transform: rotate(45deg) translateX(10px);
}

transform 関数

複数の変換をより複雑な方法で組み合わせたい場合は、transform 関数を使用することができます。この関数は、複数の変換を単一のプロパティとして指定することができます。

例えば、以下のコードは、要素を45度回転し、10px右に移動し、2倍に拡大縮小します。

.element {
  transform: transform(rotate(45deg) translateX(10px) scale(2));
}

@keyframes ルール

アニメーションを作成したい場合は、@keyframes ルールを使用することができます。このルールを使用すると、時間経過とともに要素の変換を変化させることができます。

@keyframes my-animation {
  0% {
    transform: rotate(0deg) translateX(0px) scale(1);
  }
  100% {
    transform: rotate(45deg) translateX(10px) scale(2);
  }
}

.element {
  animation: my-animation 2s linear infinite;
}

ベンダープレフィックス

transform プロパティは、ブラウザによって異なるベンダープレフィックスが必要になる場合があります。すべてのブラウザで確実に動作するように、以下のベンダープレフィックスをすべて含めることをお勧めします。

-webkit-transform: ...;
-moz-transform: ...;
-ms-transform: ...;
-o-transform: ...;
transform: ...;

CSSで複数の変換を適用するには、いくつかの方法があります。どの方法を使用するかは、要件と目的によって異なります。

HTML

<div class="element">
  <h1>要素</h1>
</div>

CSS

.element {
  /* カンマ区切り */
  transform: rotate(45deg) translateX(10px);

  /* transform 関数 */
  /* transform: transform(rotate(45deg) translateX(10px) scale(2)); */

  /* @keyframes ルール */
  /* animation: my-animation 2s linear infinite; */

  width: 200px;
  height: 200px;
  border: 1px solid black;
}

/* @keyframes ルール */
/*
@keyframes my-animation {
  0% {
    transform: rotate(0deg) translateX(0px) scale(1);
  }
  100% {
    transform: rotate(45deg) translateX(10px) scale(2);
  }
}
*/

このコードを実行すると、要素は45度回転し、10px右に移動します。

コメント

• 上記のコードは、サンプルコードです。必要に応じて変更してください。
• transform 関数や @keyframes ルールを使用する場合は、ベンダープレフィックスをすべて含めることを忘れないでください。

CSSで複数の変換を適用するその他の方法

calc() 関数を使用して、変換の値を動的に計算することができます。これは、要素のサイズや位置に基づいて変換を調整したい場合に便利です。

例えば、以下のコードは、要素の幅の半分だけ要素を右に移動します。

.element {
  transform: translateX(calc(50%));
}

変換プロパティの略記

transform プロパティには、いくつかの略記があります。これらの略記を使用して、特定の種類の変換をより簡単に指定することができます。

例えば、以下のコードは、要素を45度回転します。

.element {
  transform: rotate(45deg);
}

変換プロパティのショートハンド

.element {
  transform: rotate(45deg) translateX(10px);
}