CSS | 3Dな立方体の作り方

2021-06-112021-06-12CSS 3D デザイン,CSS

CSSで簡単に立方体（正六面体、キューブ）を作成する方法を紹介しています。

See the Pen CSS | Rotating cube by yochans (@yochans) on CodePen.

1. 立方体を作成する方法
- 1.1. 各面の配置について
- 1.2. 本体の回転について

立方体を作成する方法

CSSの「transform-style」に「preserve-3d」を指定すると、その子要素は立体的な配置が可能となります。

See the Pen CSS | cube by yochans (@yochans) on CodePen.

CSSにて立方体を作成するのに、最低限必要なHTMLとCSSコードになります。（色指定など視覚的に必要なものも含まれます。）

HTMLでは、本体となる要素と各面にあたる子要素を6つ作成します。
各面にテキストやアイコンを入れる場合はこの子要素の中に追加します。

<div class="cube">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

子要素は、その位置を親要素からの絶対値で指定しますので親要素には「position: relative;」、子要素に「position: absolute;」を指定します。
立方体の場合、左上隅になるためデフォルト値で0が指定されている「top」や「left」などは省略可能です。

「transform-style」で「preserve-3d」を指定します。

.cube {
	margin: 50px;
	width: 100px;
	height: 100px;
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(-10deg) rotateY(-25deg); /* 初期角度 */
}

/* 面 */
.cube div {
	width: 100%;
	height: 100%;
	position: absolute;
}

/* front */
.cube div:nth-child(1) {
	background: rgba(255, 127, 127,.7);
	transform: translateZ(50px);
}

 /* back */
.cube div:nth-child(2) {
	background: rgba(255, 127, 255,.7);
	transform: rotateY(180deg) translateZ(50px);
}

/* right */
.cube div:nth-child(3) {
	background: rgba(127, 127, 255,.7);
	transform: rotateY(90deg) translateZ(50px);
}

/* left */
.cube div:nth-child(4) {
	background: rgba(127, 255, 255,.7);
	transform: rotateY(-90deg) translateZ(50px);
}

/* top */
.cube div:nth-child(5) {
	background: rgba(191, 255, 127,.7);
	transform: rotateX(90deg) translateZ(50px);
}

/* bottom */
.cube div:nth-child(6) {
	background: rgba(255, 191, 127,.7);
	transform: rotateX(-90deg) translateZ(50px);
}