Кликните ссылку ниже, чтобы увидеть результат в действии.
* Посмотреть демо
Синтаксис 3D Rotation
Вращение в трехмерном пространстве, в принципе, схоже с вращением в 2D. Чтобы вращать элемент в вертикальном направлении, мы можем использовать следующий код:
-webkit-transform: rotateX(Ndeg);
-moz-transform: rotateX(Ndeg);
transform: rotateX(Ndeg);У нас также есть возможность вращать элемент горизонтально подобным образом.
-webkit-transform: rotateY(Ndeg);
-moz-transform: rotateY(Ndeg);
transform: rotateY(Ndeg);Есть множество отличных ресурсов, которые вы можете изучить, чтобы лучше вникнуть в суть CSS3 3D Transform. Ниже вы можете видеть рекомендации от нас.
* Введение в CSS3 3D Transform – 24 Ways
* Браузерная поддержка CSS3 Transform – CanIUse.com
* Приключения в трехмерном пространстве: CSS 3D Transforms – SmashingMagazine
Эффект переворота из OS X
Как мы уже отметили ранее, мы собираемся применить CSS3 Transform для создания эффекта переворота, который можно встретить в OSX или iOS. Если вы используете данные ОС, то наверняка уже знакомы с этими эффектами. В OSX вы можете встретить эти эффекты в гаджете консоли.
Раньше такой эффект достигался при помощи только лишь javascript-библиотек. Но сегодня мы можем упростить процесс, и применить технологию CSS3 Transform.
Ресурсы
На этот раз нам понадобится только jQuery и этот PSD iOS Passbook с Dribbble, который мы будем использовать в качестве графического интерфейса. У нас есть возможность внести некоторые изменения при помощи Photoshop.
Затем, возьмите один из графических элементов Passbook и сохраните его в два файла: лицевая и задняя стороны. В данном случае мы выбрали Starbuck Passbook.
HTML-код
Затем, давайте создадим новый простой HTML-документ, и поместим следующую разметку в 'body'.
<section class="passbook">
<div class="card front">
<img src="img/starbuck-front.png">
<a href="#" class="info flip">i</a>
</div>
<div class="card back">
<ul class="nav">
<li class="title">Starbuck Coffee</li>
<li class="button done"><a class="flip" href="#">Done</a></li>
</ul>
<img src="img/starbuck-back.png">
</div>
</section>Как можно видеть выше, мы поместили лицевую и заднюю стороны в разные div-элементы. На лицевой стороне у нас есть ссылка, которая будет переворачивать Passbook при нажатии. На задней стороне у нас тоже будет ссылка, которая позволит вернуть все на свои места.
CSS-код
Предположим, что вы уже создали новый CSS-файл. В этом файле каскадных таблиц стилей нам нужно сначала указать габариты Passbook, и выставить стиль трансформации на preserve-3d – таким образом, дочерние элементы также будут трансформироваться в трехмерном пространстве. Мы также добавили эффект перехода, чтобы переворот был более плавным.
.passbook {
position: relative;
width: 300px;
height: 380px;
margin-bottom: 100px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
margin-left: 85px;
}Затем мы выставили положение карточки на абсолютное, чтобы каждая карточка располагалась поверх предыдущей. Нам также нужно скрыть заднюю сторону при помощи параметра backface-visibility.
.card {
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}Лицевая сторона
Теперь нам нужно добавить декоративные стили для ссылки на лицевой стороне:
.front .info {
width: 18px;
height: 18px;
border-radius: 21px;
font-family: "Georgia", serif;
font-style: italic;
background-color: #075621;
color: #fff;
text-align: center;
position: absolute;
right: 10px;
bottom: 15px;
font-size: 11px;
line-height: 18px;
display: block;
text-decoration: none;
}Также нужно расположить лицевую сторону поверх задней, указав более высокий параметр z-index:
.front {
z-index: 1;
}Задняя сторона
Что касается задней стороны, то изначально мы ее переворачиваем.
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}Затем мы добавляем декоративные стили к навигации, которые включают в себя изменения цвета текста, добавление градации к кнопки ссылки, а также расположение кнопки в правильное место.
.back .nav {
padding: 0;
margin: 0;
color: #fff;
font-size: 12px;
width: 100%;
font-weight: bold;
}
.back .nav li {
display: inline;
position: absolute;
top: 18px;
}
.back .nav a {
font-weight: bold;
text-decoration: none;
padding: 7px 10px;
border: 1px solid #095d25;
border-radius: 5px;
color: #fff;
background: -moz-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);
}
.back .nav a:hover {
background: -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.55) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.4)), color-stop(100%,rgba(0,0,0,0.55)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);
}
.back .nav .title {
left: 105px;
}
.button.done {
right: 10px;
}Наконец, мы добавляем класс flip к Passbook следующим образом:
.rotate-3d {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}jQuery
jQuery-часть довольно простая. С самого начала, не забудьте ссылку на jQuery-библиотеку в головной секции вашего кода:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>Затем нам нужно использовать функцию toggleClass из jQuery, чтобы применить класс .rotate-3d, который мы ранее добавили в каскадные таблицы стилей.
<script type="text/javascript">
$(document).ready(function(){
$('a.flip').click(function(event){
$('.passbook').toggleClass('rotate-3d');
event.preventDefault();
});
});
</script>И это весь код, который нам был нужен. Все довольно понятно, и гораздо проще, чем с использованием javascript. Как обычно, вы можете ознакомиться с демо, и скачать исходные коды примера.
Посмотреть демо | Скачать исходные коды
