CSS - 3D Transformы: Добавление глубины в ваши веб-дизайны

Здравствуйте, будущие веб-дизайнеры! Сегодня мы отправимся в увлекательное путешествие в мир CSS 3D transformов. Как ваш добрый сосед по компьютеру, я с радостью провожу вас через эту захватывающую тему. Не волнуйтесь, если вы новички в программировании – мы начнем с основ и постепенно перейдем к более сложному. К концу урока вы будете создавать 3D шедевры, которые оживят ваши веб-сайты!

Что такое CSS 3D Transformы?

Представьте, что вы держите лист бумаги. В мире веб-дизайна это ваша типичная 2D страница. А что, если бы вы могли сложить этот лист, повернуть его или поднять? Именно это позволяют нам сделать CSS 3D transformы с нашими веб-элементами!

CSS 3D transformы дают нам власть манипулировать элементами в трехмерном пространстве. Мы можем вращать, перемещать (перемещать) и масштабировать элементы вдоль осей X, Y и Z. Ось Z добавляет глубину в наши дизайны, делая элементы более близкими или далекими.

Подготовка сцены: Свойство Transform

Прежде чем окунуться в 3D мир, давайте быстро освежим в памяти свойство transform. Это наш магический жезл для применения 3D transformаций.

.element {
transform: function(value);
}

В этой записи function - это тип трансформации, которую мы хотим применить, а value - это насколько мы хотим трансформировать элемент.

Функции Transformации

Теперь давайте посмотрим на основные 3D функции transformации, которые у нас есть:

Функция	Описание	Пример
translate3d(x,y,z)	Перемещает элемент в 3D пространстве	transform: translate3d(10px, 20px, 30px);
translateZ(z)	Перемещает элемент вдоль оси Z	transform: translateZ(30px);
scale3d(x,y,z)	Масштабирует элемент в 3D пространстве	transform: scale3d(1.5, 1.5, 2);
scaleZ(z)	Масштабирует элемент вдоль оси Z	transform: scaleZ(2);
rotate3d(x,y,z,angle)	Вращает элемент в 3D пространстве	transform: rotate3d(1, 1, 1, 45deg);
rotateX(angle)	Вращает элемент вокруг оси X	transform: rotateX(45deg);
rotateY(angle)	Вращает элемент вокруг оси Y	transform: rotateY(45deg);
rotateZ(angle)	Вращает элемент вокруг оси Z	transform: rotateZ(45deg);
perspective(n)	Устанавливает вид perspective	transform: perspective(1000px);

Не волнуйтесь, если это выглядит пугающе – мы разберем каждый с примерами!

Давайте начнем transformации!

Перемещение в 3D

Давайте начнем с перемещения элементов в 3D пространстве с помощью translate3d:

.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: translate3d(50px, 30px, 20px);
}

В этом примере наш ящик перемещается на 50px вправо, на 30px вниз и на 20px к зрителю. Это как будто ящик парит над экраном!

Масштабирование в 3D

Теперь давайте увеличим или уменьшим наш ящик в 3D:

.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: scale3d(1.5, 1.5, 2);
}

Эта трансформация делает наш ящик в 1.5 раза больше по ширине и высоте, и в два раза "глубже".

Вращение в 3D

Вращение элементов в 3D может создать некоторые действительно классные эффекты:

.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: rotateX(45deg) rotateY(30deg) rotateZ(60deg);
}

Этот ящик немного танцует, вращаясь на 45 градусов вокруг оси X, на 30 градусов вокруг оси Y и на 60 градусов вокруг оси Z!

Важность perspective

Теперь, когда дело доходит до真的很 интересного. Чтобы по-настоящему оценить 3D transformы, нам нужно добавить perspective. Представьте perspective как расстояние между зрителем и объектом.

.container {
perspective: 1000px;
}

.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transform: rotateY(45deg);
}

В этом примере мы добавили perspective к контейнеру. Теперь, когда мы вращаем ящик, он выглядит более объемным!

Объединение всего: 3D Куб

Давайте объединим все, что мы узнали, чтобы создать 3D куб:

<div class="scene">
<div class="cube">
<div class="face front">Front</div>
<div class="face back">Back</div>
<div class="face right">Right</div>
<div class="face left">Left</div>
<div class="face top">Top</div>
<div class="face bottom">Bottom</div>
</div>
</div>

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

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

.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;
}

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

.cube:hover {
transform: translateZ(-100px) rotateX(-90deg) rotateY(-45deg);
}

Этот код создает разноцветный 3D куб, который вращается при наведении курсора. Неплохо, правда?

Заключение

И вот мы arrivederci, друзья! Мы совершили путешествие через захватывающий мир CSS 3D transformов. От простых трансформаций до создания полностью функционального 3D куба, вы теперь можете добавлять глубину и dimension в свои веб-дизайны.

Помните, ключ к овладению 3D transformами - это практика. Не бойтесь экспериментировать с разными значениями и комбинациями. Кто знает? Вы можете создать следующее большое дело в веб-дизайне!

Заканчивая, я вспоминаю цитату знаменитого архитектора Фрэнка Ллойда Wright: "Пространство - это дыхание искусства." С CSS 3D transformами вы теперь имеете инструменты, чтобы оживить ваши веб-пространства. Так что идите вперед и создавайте потрясающие 3D впечатления!

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

Credits: Image by storyset