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

2019-03-262023-02-22CSS アニメーション サンプル集,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の初期値

transform-originで指定可能な値

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

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

transform-origin: 50%;