Как создавать 3D-проекты с помощью свойства преобразования CSS3

Когда дело доходит до свойства преобразования CSS3, есть два измерения: 2D и 3D. При анимации преобразования используются для изменения элемента из одного состояния в другое. Этот учебник служит дополнением к этому руководству по 2D-анимации. Я дам некоторое представление о 3D-дизайне и о том, как можно создавать потрясающие анимации, комбинируя эти основные концепции.

3D-преобразования могут быть довольно подробными и сложными, если объединено много разных частей, поэтому полезно начать с основных строительных блоков. Некоторые из этих понятий будут выглядеть знакомыми, но буква «z» будет выглядеть по-новому при работе в 3D. 3D-преобразования расширяют 2D-преобразования CSS, включая ось Z, что позволяет выполнять 3D-преобразования элементов DOM.

Что такое ось Z?

Будет много ссылок на ось Z. Легко думать об этом как о расстоянии измерения чего-либо по направлению к вам или от вас. Если это положительное значение, оно ближе к вам. Если это отрицательное значение, оно дальше от вас.

Примеры 3D-преобразования

Основными свойствами для 3D-преобразования являются translate3d , scale3d , rotateX , rotateY , rotateZ , perspective и matrix3d . В translate3d , scale3d и matrix3d ​​включено больше аргументов, потому что они принимают аргументы для x, y и z. Свойство масштаба принимает значение угла, а перспектива также принимает одно значение.

Переводить

перевестиZ()

Это определяет 3D-перевод, используя только значение оси Z. Возможно, вы помните перевод x и y из 2D-перевода. Идея та же самая, что и для translateX() , translateY() и translateZ() , потому что каждый из них принимает значение длины, которое перемещает элемент на указанное расстояние вдоль правильной оси.

В этом примере translateZ(-20px) переместит элемент на 20 пикселей от зрителя.

Вот фрагмент кода для создания этого примера:

 -webkit-transform: translateZ(-20px); -ms-transform: translateZ(-20px); transform: translateZ(-20px);

перевести3d()

Функция translate3d() используется для перемещения позиции элемента в трехмерном пространстве. Это преобразование создается путем указания координат, которые определяют, насколько оно перемещается в каждом направлении.

Функция transform: translate3d(20px, -15px, 70px); перемещает изображение на 20 пикселей по положительной оси x, на 15 пикселей по отрицательной оси y, а затем на 70 пикселей по положительной оси z.

Вот пример translate3d :

 -webkit-transform: translate3d(20px, -15px, 70px); -ms-transform: translate3d(20px, -15px, 70px); transform: translate3d(20px, -15px, 70px);

Совершенно очевидно, что происходит некоторое перекрытие второго квадрата. Это может выглядеть не так драматично, как ожидалось, но добавление свойства перспективы (позже в этом руководстве) поможет.

Повернуть

Функция rotate3d() поворачивает элемент в трехмерном пространстве на заданный угол вокруг оси. Это можно записать как rotate(x, y, z, angle) .

повернутьX()

Значения пикселей здесь не работают, они должны быть в градусах. Метод rotateX() поворачивает элемент вокруг своей оси x на заданный градус. Видите, как прямоугольник стал короче? Он вращается по оси х. В этом примере показано вращение на 55 градусов.

 -ms-transform: rotateX(55deg); /* IE 9 */ -webkit-transform: rotateX(55deg); /* Safari */ transform: rotateX(55deg);

повернутьY()

Метод rotateY() вращает элемент вокруг оси Y. Заметили, что нижний прямоугольник не такой широкий, как верхний? Он повернут так, что кажется не таким широким, как прямоугольник выше, потому что он повернут на 60 градусов.

 -ms-transform: rotateY(60deg); /* IE 9 */ -webkit-transform: rotateY(60deg); /* Safari */ transform: rotateY(60deg);

повернутьZ()

Метод rotateZ() поворачивает элемент вокруг оси Z на заданный градус. В данном случае значение составляет 120 градусов.

 -ms-transform: rotateZ(120deg); /* IE 9 */ -webkit-transform: rotateZ(120deg); /* Safari */ transform: rotateZ(120deg);

повернуть 3d ()

Функция rotate3d(1, -1, 1, 45deg) поворачивает изображение по оси Y на угол 45 градусов. Важно отметить, что вы можете использовать отрицательные значения для поворота элемента в противоположном направлении.

Так как это сложнее, чем спецификации одной оси, rotate3d можно разбить следующим образом: rotate3d(x,y,z,angle) , где x=1, y=-1, z=1, а угол поворота = 45 градусов. .

Код для стилизации выглядит так:

 -ms-transform: rotate3d(1, -1, 1, 45deg); /* IE 9 */ -webkit-transform: rotate3d(1, -1, 1, 45deg); /* Safari */ transform: rotate3d(1, -1, 1, 45deg);

Тестирование основ

По часовой стрелке вдоль оси x на 45 градусов.

 transform: rotate3d(1, 0, 0, 45deg);

По часовой стрелке вдоль оси Y на 45 градусов.

 transform: rotate3d(0, 1, 0, 45deg);

По часовой стрелке вдоль оси Z на 45 градусов.

 transform: rotate3d(0, 0, 1, 45deg);

Стоит отметить, что в зависимости от указанных значений иногда поворот будет незаметен; например, это будет незаметно: transform: rotate3d(0, 0, 0, 50deg);

Перспектива

Это, пожалуй, самое «габаритное» преобразование. Здесь вы буквально обретете перспективу. Если вы применяете 3D-преобразования к элементу без установки перспективы, результирующий эффект не будет выглядеть как трехмерный. Это то, что можно добавить к свойствам выше.

Чтобы активировать трехмерное пространство, элементу нужна перспектива. Это можно применить двумя способами: с помощью свойства transform или свойства perspective .

Свойство transform будет выглядеть следующим образом: transform: perspective(600px); и свойство перспективы будет выглядеть так: perspective: 600px; .

В следующих примерах он будет меняться между ними, поэтому обязательно внимательно изучите код.

Значение perspective определяет, насколько интенсивен 3D-эффект. Думайте о низком значении как о действительно заметном, например, о том, что вы чувствуете, когда смотрите на большой объект. При большем значении эффект менее интенсивен.

Положение точки схода также можно настроить. Это стоит упомянуть и много поэкспериментировать, так как это имеет отношение к перспективе CSS. По умолчанию точка схода для 3D-пространства расположена в центре. Используйте свойство перспективы-происхождения, чтобы изменить положение точки схода. Это будет выглядеть примерно так: perspective-origin: 15% 55% .

Шкала

шкалаZ()

Это определяет преобразование 3D-масштаба, задавая значение для оси Z. Поскольку он масштабируется только по оси Z, для демонстрации эффекта масштабирования необходимы другие функции. Посмотрите, как прямоугольник обращен к зрителю и как он действительно показывает перспективу?

Чтобы полностью понять масштаб (Z), поиграйте со значением, и вы увидите, что перспектива становится «острее» с большими значениями.

масштаб3d (х, у, г)

Функция scale3d() изменяет размер элемента и записывается как scale(x, y, z) . Как и в случае с scaleZ , не очевидно, как полностью выглядит перспектива, если только она не используется с perspective .

В этом примере используется это:

 -ms-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* IE 9 */ -webkit-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* Safari */ transform: perspective(500px) scale3d(0.8, 2, 0.2);

Небольшое примечание: если все три координаты вектора равны, масштабирование будет равномерным и заметной разницы не будет.

 transform: scale3d(1, 1, 1); /* unchanged */ transform: scale3d(2, 2, 2); /* twice the original size */

Matrix3d()

2D-матрица может принимать шесть значений, а 3D-матрица — 16 (матрица 4×4)! Это был бы очень длинный пост, если бы он осветил все детали, поэтому, если вы хотите подробнее изучить эту концепцию, я настоятельно рекомендую этот интерактивный эксперимент matrix3d ​​на Codepen.

Вот основная схема matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)

Как создать
Анимации с 3D-преобразованиями

Теперь, когда основы рассмотрены, следующим шагом будет создание интерактивных анимаций. С помощью преобразований и переходов CSS3 элементы изменяются из одного состояния в другое путем поворота, масштабирования или добавления перспективы.

Если вы новичок в CSS-анимации, важно знать, что без перехода трансформируемый элемент будет резко переходить из одного состояния в другое. Чтобы предотвратить это, можно добавить переход, чтобы вы могли контролировать изменение, придавая ему более плавный вид.

Как создать переворот карты

Кто не любит играть в карты? В этом примере используется двусторонняя карта, и вы можете увидеть обе стороны, перевернув ее с помощью преобразования. Если вы посмотрите на тег body , большая часть эффекта исходит от свойства perspective . Он установлен на 500px. Более низкое значение, такое как 100 пикселей, выглядит очень «перекошенным».

Вот исходный HTML:

 <div class="wrapper"> div class="side-one"></div> <div class="side-two"></div> </div>

CSS - это то, что делает это возможным:

 body { -webkit-perspective: 500px; perspective: 500px; } .wrapper { -webkit-transition: all 1s ease-in; transition: all 1s ease-in; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; margin: 100px auto; width: 250px; height: 250px; cursor: pointer; } .wrapper div { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; border-radius: 10px; background-position: 50% 50%; background-size: 150px; background-repeat: no-repeat; box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4); color: #FFF; text-align: center; text-shadow: 0 1px rgba(0,0,0,.3); } .side-one { z-index: 400; background: #50c6db url(image.png); } .side-two { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); background: #ef4e65 url(image.png); } .wrapper:hover { -webkit-transform: rotateY(-1turn); transform: rotateY(-1turn); }

Это можно найти на Codepen.

Если вы новичок в преобразованиях, это может показаться вам интересным: transform: rotate(1turn); Эта единица идеально подходит для нашей карты, потому что единица «поворота» — это именно то, на что она похожа, то есть один полный круг.

Я также использовал некоторое смягчение, чтобы создать собственный способ вращения. Это достигается с помощью transition: all 1s ease-in; .

Другое 3D-свойство во фрагменте — это transform-style: preserve-3d; . Включение этого позволяет элементу «качаться» в трехмерном пространстве, а не оставаться с родительским элементом.

Как создать текст с 3D-эффектом

Этот пример был вдохновлен постером старого фильма. Существует так много разных шрифтов, которые могут использовать отличные стили CSS, поэтому уникальные эффекты шрифта определенно возможны. Этот текст использует rotate3d и transform3d , чтобы придать ему уникальное преобразование.

HTML довольно прост:

 <div class="container"> <div class="text-wrapper"> <div class="text">New York City</div> </div> </div>

Вот базовый CSS:

 .container{ -webkit-perspective: 600; } .text { transform: rotate3d(2, 2, .5, 22deg)translate3d(100px, 0px, 0px); }

Более подробный CSS и пример можно найти на Codepen.

Надеемся, что 3D-преобразования CSS привнесут новое измерение в ваш дизайн. Использование перспективы — отличный способ сделать элементы более объемными. В сочетании с переходами есть много возможностей при создании анимации.