要素を縦、横に回転させるCSSアニメーションサンプル

2021-12-25

CSSアニメーションで要素を回転させる方法

CSSアニメーションで要素を回転させるサンプルコードです。
このページではX軸回転・Y軸回転での回転アニメーションを紹介しています。

CSSアニメーションを使って要素を回転

要素を回転させるCSSアニメーションのサンプルです。

See the Pen CSS rotate animation by yochans (@yochans) on CodePen.

要素を横回転させるには角度を指定するtransform: rotate()を@keyframesで指定してアニメーションさせます。transform: rotate()の指定可能な値の単位はdegになります。

<div class="box"></div>
.box{
  animation: animName 2s linear infinite;
  width:50px;
  height:50px;
  background:#0091EA;
  margin:20px;
}

@keyframes animName {
 0%{
    transform: rotate(0deg);
   }
100%{
    transform: rotate(360deg);
   }
}

CSSアニメーションを使って要素を縦回転

要素を縦回転(X軸回転)させるCSSアニメーションのサンプルです。

See the Pen CSS rotate animation X axis by yochans (@yochans) on CodePen.

要素をX軸回転させるにはX軸での角度を指定するtransform: rotateX()を@keyframesで指定してアニメーションさせます。transform: rotateX()の指定可能な値の単位はdegになります。

<div class="box"></div>
.box{
  animation: animName 2s linear infinite;
  width:50px;
  height:50px;
  background:#0091EA;
  margin:20px;
}

@keyframes animName {
 0%{
    transform: rotateX(0deg);
   }
100%{
    transform: rotateX(360deg);
   }
}

CSSアニメーションを使って要素を横回転

要素を横回転(Y軸回転)させるCSSアニメーションのサンプルです。

See the Pen CSS rotate animation Y axis by yochans (@yochans) on CodePen.

要素をY軸回転させるにはY軸での角度を指定するtransform: rotateY()を@keyframesで指定してアニメーションさせます。transform: rotateY()の指定可能な値の単位はdegになります。

HTML

.box {
	animation: rotateY-anim 2s linear infinite;
	width: 50px;
	height: 50px;
	background: #0091EA;
	margin: 20px;
}

@keyframes rotateY-anim {
	0% {
		transform: rotateY(0deg);
	}

	100% {
		transform: rotateY(360deg);
	}
}

transform-originで基準点を指定する

要素の形状によっては、回転する基準点が目的の位置と違いズレてしまう事もあります。その場合はCSSのtransformに対する基準点はtransform-originにて基準点を指定する事が可能です。

transform-origin:50% 50%;

transform-originの初期値

水平方向50%
垂直方向50%

transform-originで指定可能な値

transform-originではパーセントでの指定と、文字列値での指定が可能です。

水平方向left center right
垂直方向top center bottom

また水平方向と垂直方向が同じ値の場合は、ひとつの記述でも可能です。

transform-origin:50%;