Ефект при повороті як на os x

Відео: Learn Css3 in Arabic # 15 - 3D Transform - Rotate X, Y, Z ()

В CSS3 існує два види перетворень: 2D і 3D. Якщо ви користувалися операційною системою OS X, тоді ви бачили такий ефект 3D повороту. Якщо немає, тоді ви можете подивитися демо в повному уроці. І в цьому уроці ми створимо такий ефект з допомогою CSS3 3D перетворень.

Відео: CSS3 - Ефект обертання

Реальний приклад можна подивитися тут:

Подивитися прімерСкачать

Як використовувати? - «Ефект при повороті як на OS X»

Щоб повернути елемент по вертикалі необхідно використовувати:

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

А щоб повернути по горизонталі:

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

(Реальний приклад)

HTML частина

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

12345678910111213

class="Passbook"gt;lt;div class="Card front"gt;lt;img src="Img / starbuck-front.jpg"gt;lt;a href="#" class="Info flip"gt; ilt;/agt;lt;/divgt;lt;div class="Card back"gt;lt;ul class="Nav"gt;lt;li class="Title"gt; Каваlt;/ligt;lt;li class="Button done"gt; lt;a class="Flip" href="#"gt; Назадlt;/agt; lt;/ligt;lt;/ulgt;lt;img src="Img / starbuck-back.jpg"gt;lt;/divgt;lt;/sectiongt;

CSS частина

Визначаємо те, що два внутрішніх контейнера повинні знаходиться в 3D просторі (preserve-3d):

12345678910111213141516

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

Задня частина карти прихована:

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

Задаємо стилі для передньої частини карти:

123456789101112131415161718192021

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

Відео: CSS 3D Трансформації. Приклад з 3D кубом

А зараз для задньої частини:

Відео: Snow Stack - CSS 3D Visual Effect with WebKit

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748

.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 задаємо властивості, які відповідають поворот карти по горизонталі:

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

jQuery частина

jQuery частина дуже проста. Спершу не забудьте підключити jQuery бібліотеку між тегами :

1	lt;script src="Https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="Text / javascript"gt; lt;/scriptgt;

І пишемо наступну функцію:

$(document).ready(function(){$(`A.flip`).click(function(event){$(`.passbook`).toggleClass(`Rotate-3d`)-event.preventDefault()-})-})-

Все, що робить функція toggleClass, це додає вказаний клас rotate-3d до елементу, якщо його немає, і видаляє вказаний клас, якщо елемент вже володіє таким. А даний клас ми описали вище.