CSS

In CSS, 3D effects refer to the technique of adding depth to elements and setting perspective and viewpoints to make them appear three-dimensional on a webpage.

3D effect

　CSSでの3D効果は、要素に奥行きを持たせたり、回転させたりすることで、より立体的に見せる技術です。

基本概念

3D空間

2D空間（X軸とY軸）にZ軸（奥行き）を追加することで、要素を3次元的に配置できます。

視点

カメラの位置や視点の設定により、3D効果の見え方が変わります。

主なCSSプロパティ

transform

要素を変形させるプロパティです。2D変形（回転、拡大縮小、移動、傾斜）だけでなく、3D変形も可能です。

CSS

transform: rotateX(45deg); /* X軸回転 */
transform: rotateY(45deg); /* Y軸回転 */
transform: rotateZ(45deg); /* Z軸回転 */
transform: perspective(500px); /* パースペクティブを設定 */

transform-style

子要素を3D空間で表示するかどうかを設定します。

CSS

transform-style: preserve-3d;

perspective

視点から要素までの距離を設定し、パースペクティブ（遠近感）を与えます。

CSS

perspective: 1000px;

perspective-origin

視点の位置を設定します。通常、視点は要素の中央にあります。

CSS

perspective-origin: 50% 50%;

backface-visibility

要素の裏面の表示・非表示を設定します。3D回転で裏側が見える場合に使用します。

CSS

backface-visibility: hidden;

Sample

<div class="box"></div>

.box {
	background-color: #3498db;
	height: 200px;
	margin: 50px;
	transform: rotateY(45deg) rotateX(45deg);
	transition: transform 0.5s;
	width: 200px;
}

.box:hover {
	transform: rotateY(90deg) rotateX(90deg);
}

Sample

このサンプルについて、詳しくはこちら＞＞ transform-style