CSS | 3Dなピラミッド型の作り方

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

CSSのpreserve-3dを使って、3Dなピラミッド型を作成する方法を紹介しています。

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

ピラミッド型の作り方（3D）

この記事のサンプルではCSSの「transform-style」に「preserve-3d」を指定した立体的なピラミッド型の作成となります。
3D型より需要がありそうな断面図的な階層ピラミッド型のサンプルコードも作成しようとは考えています。

ピラミッド型に必要な要素です。

• 本体（コンテナ）
• 底面
• 側面×4

HTML構造

<div class="pyramid">
	<div class="bottom"></div>
	<div class="wall front"></div>
	<div class="wall back"></div>
	<div class="wall left"></div>
	<div class="wall right"></div>
</div>

本体の作成

コンテナとなる本体を作成します。

3Dの描画を可能とする「transform-style: preserve-3d;」を指定、transformのrotateで作業用の角度をつけておきます。
サンプルでは、本体を25度下に回転させ、斜め上から見た状態になっています。

.pyramid  {
	margin: 40px;
	width: 150px;
	height: 150px;
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(-25deg) rotateY(0);
	/* animation: rotate-anim 8s linear infinite; */
}

底面の作成

底面は正方形で作成しています。

.pyramid .bottom {
	width: 150px;
	height: 150px;
	position: absolute;
	top: 75px;
	left: 0px;
	background: #e6e6fa;
	transform: rotateX(90deg);
}

topの75pxは、0から90度回転させた時に高さの半分（150 / 2）がずれる分です。

側面の作成

側面の三角形はclip-pathのpolygonを利用していますが、borderを使って作成した三角形でも問題ありません。

bottomの10pxも、回転させた時のズレ分です。

各面のtransformは、同じ数値を使う場合は順番に実行される必要があります。

位置を変更（手前か奥または左か右に高さの4分の1）、rotateYで向きの回転、rotateXで傾けています。

.pyramid .wall {
	width: 150px;
	height: 150px;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	position: absolute;
	bottom: 10px;
}

.pyramid .wall.front {
	background: #ffc0cb;
	transform: translateZ(37.5px) rotateY(0deg) rotateX(30deg);
}

.pyramid .wall.back {
	background: #98fb98;
	transform: translateZ(-37.5px) rotateY(180deg) rotateX(30deg);
}

.pyramid .wall.left {
	background: #ffff80;
	transform: translateX(-37.5px) rotateY(270deg) rotateX(30deg);
}

.pyramid .wall.right {
	background: #87cefa;
	transform: translateX(37.5px) rotateY(-270deg) rotateX(30deg);
}

動作サンプルのCSS

上記動作サンプルにあるアニメーションを含めたCSSのサンプルコードです。

.pyramid  {
	margin: 40px;
	width: 150px;
	height: 150px;
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(-25deg) rotateY(0);
	animation: rotate-anim 8s linear infinite;
}

@keyframes rotate-anim {
	0% {
		transform: rotateX(-25deg) rotateY(0);
	}
	100% {
		transform: rotateX(-25deg) rotateY(360deg);
	}
}

.pyramid .bottom {
	width: 150px;
	height: 150px;
	position: absolute;
	top: 75px;
	left: 0px;
	background: #e6e6fa;
	transform: rotateX(90deg);
}

.pyramid .wall {
	width: 150px;
	height: 150px;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	position: absolute;
	bottom: -10px;
}

.pyramid .wall.front {
	background: #ffc0cb;
	transform: translateZ(37.5px) rotateY(0deg) rotateX(30deg);
}

.pyramid .wall.back {
	background: #98fb98;
	transform: translateZ(-37.5px) rotateY(180deg) rotateX(30deg);
}

.pyramid .wall.left {
	background: #ffff80;
	transform: translateX(-37.5px) rotateY(270deg) rotateX(30deg);
}

.pyramid .wall.right {
	background: #87cefa;
	transform: translateX(37.5px) rotateY(-270deg) rotateX(30deg);
}