Обычно CSS-трансформации подразумевают двумерное пространство внутри браузера. Т.е. у нас есть оси Х и Y, идущие по горизонтали и вертикали от левого верхнего угла браузера. Однако, у нас есть еще третья ось - ось Z, которая направлена перпендикулярно плоскости экрана и браузера. Относительно этой оси можно манипулировать, например, таким свойством, как z-index, которое используется для позиционированных объектов.
Перспектива
Трехмерные трансформации начинаются со свойства perspective - перспектива. CSS-свойство transform: perspective(value) добавляет глубину и реалистичность — она определяет, с какой "дистанции" мы смотрим на сцену.
- Меньшее значение (например,
perspective: 300px;) → сильная перспектива (объекты "уходят вдаль" быстро). - Большее значение (например,
perspective: 1000px;) → мягкая перспектива (эффект глубины слабее).
Свойство transform: perspective(value) задаётся либо на родителе, а эффект виден у вложенного элемента с transform, либо на самом элементе. В качестве значения (value) вы можете указывать пиксели, em, rem, vm, vh, vw, pt, но не %. Кроме того, значение none или 0 отменяют перспективу.
Посмотрите на примере, как изменяется вид элемента со свойством transform: rotateX(50deg) в зависимости от разных значений перспективы.
See the Pen 3D CSS perspective by HTML-plus (@ambassador) on CodePen.
Другие значения свойства transform
Свойство transform изменяет положение, поворот или масштаб элемента. Если мы говорим о 3d-трансформациях, то это значит, что можно вращать, масштабировать или смещать элемент не только по горизонтали и вертикали, но и “вглубь экрана”.
Вращение (поворот):
| 1 2 3 | transform: rotateX(45deg); /* вращение вокруг оси X (вверх-вниз) */ transform: rotateY(45deg); /* вращение вокруг оси Y (влево-вправо) */ transform: rotateZ(45deg); /* вращение "на плоскости", как в 2D */ |
В качестве примера - трехмерный текст:
See the Pen 3D text with ztext by Burmese Potato (@BurmesePotato) on CodePen.
Перемещение:
| 1 2 3 | transform: translateX(50px); /* перемещение вправо/влево с отрицат. значением */ transform: translateY(50px); /* перемещение вниз/вверх с отрицат. значением */ transform: translateZ(50px); /* перемещение вперёд, к пользователю */ |
Например, за счет этих свойств можно показать текст:
See the Pen Playful by Josh Bryant (@j_shb) on CodePen.
Масштаб:
| 1 2 3 | transform: scaleX(.7); transform: scaleY(.7); transform: scaleZ(.7); |
Что касается масштаба, то его имеет смысл рассматривать в комбинации с другими свойствами трансформации.
See the Pen 3D CSS scale by HTML-plus (@ambassador) on CodePen.
Несколько примеров с элементами, которые трансформируются в трехмерном пространстве за счет перечисленных выше свойств.
See the Pen 3D Transform Examples by HTML-plus (@ambassador) on CodePen.
Свойство transform-origin
Свойство transform-origin устанавливает координаты точки, относительно которой будет происходить трансформация элемента. То есть по сути это центр, относительно которого происходят трансформации. Значение по умолчанию: 50% 50% 0. То есть центр трансформации находится в центре вашего html-элемента (это обычно прямоугольник) и не смещен никуда по оси Z.
Задаваться значения могут в виде 2 или 3 значений следующим образом:
- Координата по оси X:
<размер> | <проценты> | left | center | right - Координата по оси Y:
<размер> | <проценты> | top | center | bottom - Координата по оси Z может задаваться только в любых корректных единицах для измерения длины (исключая проценты).
Давайте теперь посмотрим на комбинацию свойств. Ниже вы можете протестировать примеры 3D-трансформаций с различными значениями свойств transform и transform-origin:
See the Pen CSS3 Perspective Playground ✨ by Elen (@ambassador) on CodePen.
Вы можете сами убедиться, какие значения влияют на изменения элемента при разных значениях перспективы и других свойств.
Ниже вы найдете еще один пример, в котором блок переворачивается со средины вниз.
See the Pen 3D Flip блок by HTML-plus (@ambassador) on CodePen.
Свойство transform-style
Свойство transform-style определяет, как дочерние элементы будут отображаться в 3D-пространстве. Это свойство должно использоваться совместно с transform для родительского элемента.
Значения: transform-style: flat | preserve-3d
По умолчанию, браузер "сплющивает" вложенные элементы после трансформации. Чтобы сохранить настоящую трёхмерность (например, когда у нас куб или карточка, у которой есть “задняя сторона”), нужно добавить это свойство.
See the Pen Flip Card by HTML-plus (@ambassador) on CodePen.
В этом примере одна карточка, состоящая из 2х сторон-div-ов переворачивается при наведении, вторая - при клике за счет использования label и <input type="checkbox">.
Еще один пример использования свойства transform-style для построения куба.
See the Pen 3D cube by HTML-plus (@ambassador) on CodePen.
Примеры 3D-трансформаций с помощью CSS-кода
Ниже вы найдете примеры кода, которые как просто создают визуальные 3D-объекты за счет CSS, так и имеют анимацию или JS-код, управляющий интерактивностью элемента.
Мобильный телефон средствами CSS
Автор LeFourbeFromage
See the Pen Daily UI #03 - Simple 3d Smartphone (css only) by LeFourbeFromage (@lefourbefromage) on CodePen.
и еще один от Jay Holtslander
See the Pen Photorealistic pure CSS mobile phone by Jay Holtslander (@j_holtslander) on CodePen.
Трансформация текста при наведении
See the Pen CSS Perspective Text Hover by James Bosworth (@bosworthco) on CodePen.
Flipping Cards
Автор Nicolas Pavlotsky
See the Pen Parallax Flipping Cards by Nicolas Pavlotsky (@nicolaspavlotsky)on CodePen.
Трехмерный график
Кликните по карточке - и увидите график. Автор Steve Gardner.
See the Pen 3D step counter card by Steve Gardner (@ste-vg)on CodePen.
Эффект переворота при переключении форм
Автор Ivan Grozdic
See the Pen Log In / Sign Up - pure css - #12 by Ivan Grozdic (@ig_design) on CodePen.
Эффект параллакса при скроллинге
Автор Scott Kellum
See the Pen Sass parallax example by HTML-plus (@ambassador)on CodePen.
Меню в виде разворачивающегося списка
Автор Justin Windle
See the Pen Makisu by Justin Windle (@soulwire) on CodePen.
Мобильное меню
Автор Poppe1219
See the Pen Mobile menu, CSS only by Poppe1219 - Frontend and Backend Developer (@poppe1219) on CodePen.
3D Carousel
Автор Paul Noble
See the Pen Split 3D Carousel by Paul Noble (@paulnoble) on CodePen.
Эффект волны при наведении
Автор Thea
See the Pen 3D wave animation by Thea (@HighFlyer) on CodePen.
Анимированное 3d CSS-лого от Amit Sheen
See the Pen CSS in 3D in CSS by Amit Sheen (@amit_sheen) on CodePen.
3D Image Slider
Автор codefactory
See the Pen Slicebox - 3D Image Slider by codefactory (@codefactory) on CodePen.
Анимированный куб-слайдер только на CSS от Hrtzt
See the Pen Animated cube slider by Hrtzt (@hrtzt) on CodePen.
Анимация сборки-разборки куба от David Khourshid
See the Pen CSS-Only Cube Pack by David Khourshid (@davidkpiano) on CodePen.
Еще несколько кубов с анимацией
Автор YusukeNakaya
See the Pen Only CSS: Duplicate Cubes by Yusuke Nakaya (@YusukeNakaya) on CodePen.
CSS-коробка от Paulo Nunes
See the Pen 150ml of vanilla CSS by Paulo Nunes (@syndicatefx) on CodePen.
Трехмерный ползунок от Hornebom
See the Pen budgetSlider by Hornebom (@Hornebom) on CodePen.
Вертикальный CSS слайдер с перспективой
Автор Jordan
See the Pen Vertical Slide Gallery Wall - #CodePenChallenge: Photo Gallery by Jordan (@DeyJordan)on CodePen.
Поворот трехмерного постера
Автор Olivier 3lanc
See the Pen FURIOSA 3D Animated Poster by Olivier 3lanc (@olivier3lanc) on CodePen.
или карточки (автор Lisi)
See the Pen 3d Card by HTML-plus (@ambassador) on CodePen.
Всплытие картинки из постера от Gayane Gasparyan
See the Pen 3D Card Hover by Gayane Gasparyan (@gayane-gasparyan) on CodePen.
Облако меток в виде 3D шара от Niklas Knaack
See the Pen CSS Only 3D Tagcloud V2 by Niklas Knaack (@NiklasKnaack) on CodePen.
