Exore LTD » CSS3 » Красивый эффект при повороте как на OS X с помощью 3D CSS3 Rotation
Лого SiteHere.ru

Июль 19, 2014 Запись была обновлена

Время чтения: 3 мин. Прочитать позже

Красивый эффект при повороте как на OS X с помощью 3D CSS3 Rotation

Красивый эффект при повороте как на OS X с помощью 3D CSS3 Rotation

В CSS3 существует два вида преобразований: 2D и 3D. Если вы пользовались операционной системой OS X, тогда вы видели такой эффект 3D поворота. Если нет, тогда вы можете посмотреть демо в полном уроке. И в этом уроке мы создадим такой эффект с помощью CSS3 3D преобразований.

Реальный пример можно посмотреть здесь:

Посмотреть примерСкачать




Как использовать? — «Эффект при повороте как на OS X»

Чтобы повернуть элемент по вертикали необходимо использовать:

1
2
3

    -webkit-transform: rotateX(Ndeg);  
    -moz-transform: rotateX(Ndeg);  
    transform: rotateX(Ndeg);

А чтобы повернуть по горизонтали:

1
2
3

    -webkit-transform: rotateY(Ndeg);  
    -moz-transform: rotateY(Ndeg);  
    transform: rotateY(Ndeg);


(Реальный пример)

HTML часть

Мы помещаем одно изображение в контейнер с классами card front, а второе с классами card back:

1
2
3
4
5
6
7
8
9
10
11
12
13

<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">Кофе</li>
            <li class="button done"><a class="flip" href="#">Назад</a></li>
        </ul>
        <img src="img/starbuck-back.png">
    </div>
</section>


CSS часть

Определяем то, что два внутренних контейнера должны находится в 3D пространстве(preserve-3d):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

Задняя часть карты скрыта:

1
2
3
4
5
6

.card {   
    position: absolute;  
    -webkit-backface-visibility: hidden;  
    -moz-backface-visibility: hidden;  
    backface-visibility: hidden;  
}

Задаем стили для передней части карты:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.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;  
    rightright: 10px;  
    bottombottom: 15px;  
    font-size: 11px;  
    line-height: 18px;  
    display: block;  
    text-decoration: none;  
}
 
.front {  
    z-index: 1;  
}

А сейчас для задней части:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

.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 bottombottom, 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 bottombottom,  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 bottombottom, 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 bottombottom,  rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);  
}  
.back .nav .title {  
    left: 105px;  
}  
.button.done {  
    rightright: 10px;  
}

И последним шагом в CSS задаем свойства, которые отвечают поворот карты по горизонтали:

1
2
3
4
5

.rotate-3d {  
    -webkit-transform: rotateY(180deg);  
    -moz-transform: rotateY(180deg);  
    transform: rotateY(180deg);  
}


jQuery часть

jQuery часть очень простая. Сперва не забудьте подключить jQuery библиотеку между тегами <head></head>:

1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

И пишем следующую функцию:

1
2
3
4
5
6

$(document).ready(function(){  
    $('a.flip').click(function(event){  
        $('.passbook').toggleClass('rotate-3d');  
        event.preventDefault();  
    });  
});

Всё, что делает функция toggleClass, это добавляет указанный класс rotate-3d к элементу, если его нет, и удаляет указанный класс, если элемент уже обладает таковым. А данный класс мы описали выше.



Вывод

Красивый эффект, который можно использовать, например, при показе изображений «ДО и ПОСЛЕ».


Успехов!

Источник: http://www.hongkiat.com/blog/css3-3d-transforms/

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

1 комментарий к записи
  • Саматакая

    Это надо ещё догадаться на кнопочку малюсенькую нажать 😈

     
    Ответить

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

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