Tailwind CSSで要素を回転・拡大縮小・波打たせる：Transform Originを使ったアニメーションサンプル

Tailwind CSSにおける「Transforms」と「Transform Origin」の解説

「Transform Origin」は、変形の中心となるポイントを設定するプロパティです。このプロパティを設定することで、変形の方向や動きをコントロールすることができます。

Transform Origin の設定方法

「Transform Origin」は、以下の方法で設定できます。

• キーワード

.element {
  transform-origin: top left;
}

• 百分率

.element {
  transform-origin: 50% 50%;
}

• ピクセル値

.element {
  transform-origin: 10px 10px;
}

Transform Origin の例

以下の例では、「Transform Origin」を使用して、要素の回転アニメーションを作成しています。

<div class="element"></div>

.element {
  width: 100px;
  height: 100px;
  background-color: red;
  
  /* アニメーション設定 */
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Transform Origin 設定 */
.element {
  transform-origin: top left;
}

この例では、要素の回転中心を左上に設定しています。そのため、要素は左上から回転するアニメーションになります。

その他の Transform Origin の設定

「Transform Origin」は、以下のプロパティと組み合わせて使用することで、より複雑な動きを表現することができます。

• transform-box

このプロパティは、変形の中心となるボックスを設定します。

• transform-style

このプロパティは、変形がどのように適用されるかを設定します。

「Transform Origin」は、Tailwind CSSの「Transforms」機能を使って、要素の変形をコントロールするための重要なプロパティです。このプロパティを理解することで、Webサイトに動きやインタラクティブ性を与えることができます。

Tailwind CSS Transform Origin サンプルコード

基本的なサンプルコード

<div class="w-20 h-20 bg-red-500 mx-auto">
  <p class="text-center">要素</p>
</div>

.w-20 {
  width: 20px;
}

.h-20 {
  height: 20px;
}

.bg-red-500 {
  background-color: red;
}

.mx-auto {
  margin: 0 auto;
}

.text-center {
  text-align: center;
}

/* アニメーション設定 */
.element {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Transform Origin 設定 */
.element {
  transform-origin: top left;
}

応用的なサンプルコード

要素を拡大縮小しながら回転させる

<div class="w-20 h-20 bg-red-500 mx-auto">
  <p class="text-center">要素</p>
</div>

.w-20 {
  width: 20px;
}

.h-20 {
  height: 20px;
}

.bg-red-500 {
  background-color: red;
}

.mx-auto {
  margin: 0 auto;
}

.text-center {
  text-align: center;
}

/* アニメーション設定 */
.element {
  animation: rotate-scale 2s linear infinite;
}

@keyframes rotate-scale {
  from {
    transform: rotate(0deg) scale(1);
  }
  to {
    transform: rotate(360deg) scale(2);
  }
}

/* Transform Origin 設定 */
.element {
  transform-origin: top left;
}

このコードは、要素を回転させながら、同時に拡大縮小させるアニメーションを作成します。

要素を斜めに回転させる

<div class="w-20 h-20 bg-red-500 mx-auto">
  <p class="text-center">要素</p>
</div>

.w-20 {
  width: 20px;
}

.h-20 {
  height: 20px;
}

.bg-red-500 {
  background-color: red;
}

.mx-auto {
  margin: 0 auto;
}

.text-center {
  text-align: center;
}

/* アニメーション設定 */
.element {
  animation: skew 2s linear infinite;
}

@keyframes skew {
  from {
    transform: skew(0deg);
  }
  to {
    transform: skew(30deg);
  }
}

/* Transform Origin 設定 */
.element {
  transform-origin: top left;
}

このコードは、要素を斜めに回転させるアニメーションを作成します。

要素を波打たせるように動かす

<div class="w-20 h-20 bg-red-500 mx-auto">
  <p class="text-center">要素</p>
</div>

.w-20 {
  width: 20px;
}

.h-20 {
  height: 20px;
}

.bg-red-500 {
  background-color: red;
}

.mx-auto {
  margin: 0 auto;
}

.text-center {
  text-align: center;
}

/* アニメーション設定 */
.element {
  animation: wave 2s linear infinite;
}

@keyframes wave {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(10px);
  }
}

/* Transform Origin 設定

Tailwind CSS Transform Origin のその他の方法

transform-box プロパティ

<div class="w-20 h-20 bg-red-500 mx-auto">
  <p class="text-center">要素</p>
</div>

.w-20 {
  width: 20px;
}

.h-20 {
  height: 20px;
}

.bg-red-500 {
  background-color: red;
}

.mx-auto {
  margin: 0 auto;
}

.text-center {
  text-align: center;
}

/* アニメーション設定 */
.element {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Transform Origin 設定 */
.element {
  transform-origin: top left;
  transform-box: content-box;
}

このコードでは、transform-box プロパティを content-box に設定しています。

transform-style プロパティは、変形がどのように適用されるかを設定します。デフォルトは flat ですが、preserve-3d に設定することもできます。

<div class="w-20 h-20 bg-red-500 mx-auto">
  <p class="text-center">要素</p>
</div>

.w-20 {
  width: 20px;
}

.h-20 {
  height: 20px;
}

.bg-red-500 {
  background-color: red;
}

.mx-auto {
  margin: 0 auto;
}

.text-center {
  text-align: center;
}

/* アニメーション設定 */
.element {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(360deg);
  }
}

/* Transform Origin 設定 */
.element {
  transform-origin: top left;
  transform-style: preserve-3d;
}

このコードでは、transform-style プロパティを preserve-3d に設定しています。

@keyframes ルール内で transform-origin を設定することで、アニメーションの各ステップにおける変形の中心を設定することができます。

<div class="w-20 h-20 bg-red-500 mx-auto">
  <p class="text-center">要素</p>
</div>

.w-20 {
  width: 20px;
}

.h-20 {
  height: 20px;
}

.bg-red-500 {
  background-color: red;
}

.mx-auto {
  margin: 0 auto;
}

.text-center {
  text-align: center;
}

/* アニメーション設定 */
.element {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg) scale(1);
    transform-origin: top left;
  }
  to {
    transform: rotate(360deg) scale(2);
    transform-origin: bottom right;
  }
}

このコードでは、@keyframes ルール内で transform-origin を設定