3D-куб на чистом CSS

В этом руководстве мы создадим полностью функциональный 3D-куб, используя только HTML и CSS. Для этого мы воспользуемся CSS-свойствами transform и perspective, которые позволяют создавать трехмерные эффекты без JavaScript.

HTML структура куба

Начнем с создания HTML-разметки. Нам понадобится контейнер и шесть граней куба:

<div class="scene">
	<div class="cube">
		<div class="cube__face cube__face--front">front</div>
		<div class="cube__face cube__face--back">back</div>
		<div class="cube__face cube__face--right">right</div>
		<div class="cube__face cube__face--left">left</div>
		<div class="cube__face cube__face--top">top</div>
		<div class="cube__face cube__face--bottom">bottom</div>
	</div>
</div>

Базовые CSS стили

Настроим сцену и основные свойства куба:

.scene {
	width: 200px;
	height: 200px;
	perspective: 600px;
	margin: 80px auto;
}

.cube {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 1s;
}

.cube__face {
	position: absolute;
	width: 200px;
	height: 200px;
	border: 2px solid black;
	line-height: 200px;
	font-size: 40px;
	font-weight: bold;
	color: white;
	text-align: center;
	opacity: 0.8;
}

Позиционирование граней

Расположим каждую грань в 3D-пространстве с помощью трансформаций:

.cube__face--front  { 
	background: rgba(255, 0, 0, 0.7);
	transform: rotateY(0deg) translateZ(100px); 
}
.cube__face--back   { 
	background: rgba(0, 255, 0, 0.7);
	transform: rotateY(180deg) translateZ(100px); 
}
.cube__face--right  { 
	background: rgba(0, 0, 255, 0.7);
	transform: rotateY(90deg) translateZ(100px); 
}
.cube__face--left   { 
	background: rgba(255, 255, 0, 0.7);
	transform: rotateY(-90deg) translateZ(100px); 
}
.cube__face--top	{ 
	background: rgba(0, 255, 255, 0.7);
	transform: rotateX(90deg) translateZ(100px); 
}
.cube__face--bottom { 
	background: rgba(255, 0, 255, 0.7);
	transform: rotateX(-90deg) translateZ(100px); 
}

Анимация вращения

Добавим автоматическое вращение куба вокруг осей X и Y:

.cube {
	animation: rotation 12s infinite linear;
}

@keyframes rotation {
	from { transform: rotateX(0deg) rotateY(0deg); }
	to { transform: rotateX(360deg) rotateY(360deg); }
}

Полный рабочий пример

Вот полный код 3D-куба с анимацией:

<div class="scene">
	<div class="cube">
		<div class="cube__face cube__face--front">front</div>
		<div class="cube__face cube__face--back">back</div>
		<div class="cube__face cube__face--right">right</div>
		<div class="cube__face cube__face--left">left</div>
		<div class="cube__face cube__face--top">top</div>
		<div class="cube__face cube__face--bottom">bottom</div>
	</div>
</div>

body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: #f5f5f5;
}

.scene {
	width: 200px;
	height: 200px;
	perspective: 600px;
}

.cube {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	animation: rotation 15s infinite linear;
}

.cube__face {
	position: absolute;
	width: 200px;
	height: 200px;
	border: 2px solid #333;
	line-height: 200px;
	font-size: 40px;
	font-weight: bold;
	color: white;
	text-align: center;
	opacity: 0.8;
}

.cube__face--front  { 
	background: rgba(255, 0, 0, 0.7);
	transform: rotateY(0deg) translateZ(100px); 
}
.cube__face--back   { 
	background: rgba(0, 255, 0, 0.7);
	transform: rotateY(180deg) translateZ(100px); 
}
.cube__face--right  { 
	background: rgba(0, 0, 255, 0.7);
	transform: rotateY(90deg) translateZ(100px); 
}
.cube__face--left   { 
	background: rgba(255, 255, 0, 0.7);
	transform: rotateY(-90deg) translateZ(100px); 
}
.cube__face--top	{ 
	background: rgba(0, 255, 255, 0.7);
	transform: rotateX(90deg) translateZ(100px); 
}
.cube__face--bottom { 
	background: rgba(255, 0, 255, 0.7);
	transform: rotateX(-90deg) translateZ(100px); 
}

@keyframes rotation {
	from { transform: rotateX(0deg) rotateY(0deg); }
	to { transform: rotateX(360deg) rotateY(360deg); }
}

Задачи на понимание

Сделайте так, чтобы куб вращался только по наведению на него мышкой.