Анализ 3D-эффекта

Шаг за шагом разберем код, чтобы понять, как был достигнут данный эффект.

Первый важный этап — установка значения для — webkit-perspective родительского элемента. Это позволит активизировать 3D-пространство:

. Qcontainer {height: 100%; width: 28%; position: relative;

-webkit-perspective: 200; float: left; margin-right: 2%;

Чем выше значение — webkit-perspective, тем больше будет виртуальная глубина 3D-пространства с вашей точки зрения. Следовательно, для слабо выраженного 3D-эффекта нужно увеличить данное значение, а для сильно выраженного 3D-эффекта — уменьшить его.

Следующая команда, заслуживающая внимания:

.film {

Width: 100%; height: 15em;

-webkit-transform-style: preserve-3d;

-webkit-transition: 1s;

}

Первое объявление перспективы, добавленное в класс. Qcontainer, применяется только к первому прямому потомку (элемент div с классом. film в этом примере). Следовательно, для дальнейшей передачи перспективы родительского элемента мы используем значение preserve-3d.

Теперь мы добавим правило для «переворачивания» элемента div с классом. film при наведении указателя мыши на область. Qcontainer:

. Qcontainer: hover. film {

-webkit-transform: rotateY(180deg);

}

Следующее правило скрывает из виду противоположную сторону постера, когда он переворачивается:

.face {

Position: absolute;

-webkit-backface-visibility: hidden;

}

Абсолютное позиционирование элемента div с классом. face необходимо для того, чтобы он располагался над элементом div с классом. back:

.back {

Width: 66%; height: 127%;

-webkit-transform: rotateY(180deg);

Background: #3b3b3b;

Background: — webkit-linear-gradient (top,

Rgba (0,0,0,0.65) 0%, rgba (0,0,0,0) 100%);

Padding: 15%;

}

И наконец, мы также добавляем простой метод rotateY дляс div с классом. back. Без него этот элемент div, по сути, «просвечивался» бы сквозь div с классом. front.

Вот и все. Теперь при наведении указателя мыши на любой из повторов картинка будет переворачиваться довольно эффектным образом.

Однако в браузерах, не основанных на WebKit, функциональность нашей страницы явно хромает (рисунок 7.13).

В браузерах, не поддерживающих 3D-трансформации, анимация не работает

Что ж, мы можем обеспечить приемлемый резервный вариант для браузеров, которые не основаны на WebKit, добавив еще немного CSS-кода, как в былые времена:

.front {

Z-index: 5;

}

. Qcontainer: hover. front {z-index: 0;

}

Сначала мы задаем для z-index значение 5 для элемента div с классом. front, чтобы он по умолчанию располагался над div с классом. back:

.front {

Z-index: 5;

Для состояния наведения указателя мыши на область. Qcontainer мы зададим для z-index значение О, чтобы она снова оказалась позади div с классом. back:

. Qcontainer: hover. front {z-index: 0;

}

Теперь лишенная «украшательств» функциональность «вопрос/ответ» будет доступна в браузерах, не поддерживающих 3D-трансформации, но без занятного 3D-эффекта (рисунок 7.14).

Изображения переворачиваются, но без ЭР-эффекта.

3-й-трансформации не готовы к повсеместному внедрению.

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

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

ПРИМЕЧАНИЕ.

Ознакомиться с новейшими разработками W3C в сфере 3D-трансформаций CSS можно по адресу http://dev. w3.org/csswg/css3-3d-transforms/.