Чего вы можете добиться с помощью CSS 3D Transforms. Будут случаи, когда вы будете в полной мере использовать возможности CSS 3D.
Данный пример - это эффект, который становится довольно популярным и зависит от 3D-трансформаций. В двух словах, мы распространили некоторые изображения по оси Z, затем мы использовали мышь как (фальшивую) 3D-камеру, чтобы перспектива изменилась при перемещении курсора мыши. То, что мы на самом деле делаем, - это поворот изображений в 3D-пространстве в соответствии с положением мыши.
Поскольку этот эффект зависит от движения мыши, на мобильных устройствах он не будет виден.
Создание структуры
Главная структура HTML - элемент <figure>, содержащий наше изображение героя (мы использовали 3 разных <img> s) и завернутые в элемент .cd-background-wrapper
.
<div class="cd-background-wrapper">
<figure class="cd-floating-background">
<img src="img/cd-img-1.jpg" alt="image-1">
<!-- images here -->
</figure>
</div>
Используемые изображения должны иметь одинаковые размеры.
Добавление стиля
Чтобы создать изображение героя, мы помещаем элементы <img>
один поверх других: у первого есть статическая позиция, в то время как остальные находятся в абсолютном положении; Каждому из них присваивается другое значение translateZ
.
Идея эффекта параллакса: когда пользователь наводит курсор мыши на изображение героя, элемент cd-floating-background
поворачивается (по осям X и Y) в соответствии с положением мыши. Поскольку элементы <img>
имеют разные значения translateZ
, для каждого из них воспринимается другое вращение.
Для правильного достижения этого эффекта мы должны убедиться, что наши <img>
правильно расположены в 3D-пространстве: во-первых, мы присваиваем значение перспективы фрейму .cd-background-wrapper
, который создает 3D-пространство, Его дети; Затем мы назначаем стиль преобразования: preserve-3d
на .cd-floating-background
, чтобы его дети размещались в трехмерном пространстве, а не сплющивались (по умолчанию). TranslateZ делает все остальное!
.cd-background-wrapper {
overflow: hidden;
perspective: 4000px;
}
.cd-floating-background {
transform-style: preserve-3d;
}
.cd-floating-background img:first-child {
transform: translateZ(50px);
}
.cd-floating-background img:nth-child(2) {
transform: translateZ(290px);
}
.cd-floating-background img:nth-child(3) {
transform: translateZ(400px);
}
IE
IE9 не поддерживает CSS3 3D Transforms, в то время как IE10 + не поддерживает свойство transform-style: preserve-3d
. Таким образом, эффект параллакса не будет виден в IE, и вы увидите стандартное изображение.
Обработка событий
Мы привязываем функцию initBackground ()
к событию загрузки изображения: эта функция изменяет значение свойства position
элемента <figure>
относительно абсолютного (используется класс is-absolute
). В этот момент нам нужно назначить правильную высоту элементу .cd-background-wrapper
(поскольку его дочерний элемент находится в абсолютной позиции, его высота по умолчанию равна 0) и правильные размеры для .cd-floating-background
(он должен Будет больше, чем его обертка - таким образом, вращение не покажет пустые границы).
Мы оцениваем соотношение сторон изображения и ширину видового экрана и назначаем для .cd-background-wrapper
высоту, равную viewportWidth
/ heroAspectRatio
. Высота и ширина фрейма cd-floating-background
пропорциональны фреймам .cd-background-wrap
, а его параметры left
и top
установлены так, чтобы изображение центрировалось внутри родительского.
Затем мы связываем событие mousemove
с оболочкой .cd-background-wrap:
позиция мыши оценивается с использованием event.pageX
и event.pageY
, а соответствующему значению rotateX
и rotateY
присваивается .cd-floating-background
.
Примечание:
Modernizr не обнаруживает и не может сохранить-3d. Итак, чтобы настроить таргетинг на браузеры, которые этого не делают, мы использовали функцию getPerspective
, которая присваивает классу preserve-3d
/ no-preserve-3d
<html> в соответствии с поддержкой браузера.