Вкратце об обеспечении 3D-трансформаций CSS3

Несмотря на то что 3D-трансформации CSS3 уже поддерживаются браузерами на основе WebKit (Safari и Chrome) и Firefox версии 10 и выше, их работа в Internet Explorer будет возможна только в его версии под номером 10. Однако, невзирая на недостаточную поддержку настольными браузерами, 3D-трансформации CSS3 хорошо работают в браузерах, устанавливаемых в операционных системах Android (версии 3 и выше) и iOS (всех версий), благодаря тому, что эти браузеры базируются на WebKit.

В дальнейшем вам лучше всего проверять свои результаты в браузере на основе WebKit, например в Chrome или Safari (если только, конечно, вы не читаете эту книгу в то время, когда ваш излюбленный браузер уже поддерживает 3D-трансформации).

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

Допустим, мы решили организовать на сайте And the winner isn’t. незамысловатую викторину. Для обеспечения соответствующей функциональности мы задействуем изображения в виде постеров фильмов, а пользователям нужно будет угадать, хорошим или плохим считается определенный фильм по мнению самого авторитетного мирового кинокритика (да, это я). При наведении указателя мыши.

На любое из этих изображений (или прикосновении к нему на сенсорном экране) будет показываться ответ.

Далее приведен соответствующий фрагмент разметки. Обратите внимание, что я не стал дублировать разметку для каждого изображения, поскольку она будет абсолютно одинакового формата для всех постеров:

<section class="Qcontainer">

<div class="film">

<div class="face front">

<img src="img/goonies. jpg" alt="The Goonies" />

</div>

<div class="face back"><h5>HOT!</h5></div>

</div>

</section>

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

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

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

}

.film {

Width: 100%; height: 15em;

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

-webkit-transition: 1s;

}

. Qcontainer: hover. film {

-webkit-transform: rotateY(180deg);

}

.face {

Position: absolute;

-webkit-backface-visibility: hidden;

}

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

Когда этот код займет свое место, при наведении указателя мыши на соответствующий постер фильма изображение будет переворачиваться, после чего пользователь увидит простой ответ — HOT! (ХОРОШИЙ!) или NOT! (ПЛОХОЙ!)

Рисунок 7.12. При наведении указателя мыши постер к фильму переворачивается.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *