Поворот объекта вокруг свой оси на CSS3
Подготовил: Евгений Рыжков
Дата публикации: 12.09.2012
Последнее обновление: 02.04.2014
Поворот плоского объекта
Для демонстрации перевернем игральную карту.
<div class="container" id="container"> <div id="card"> <figure class="back"></figure> <figure class="front"></figure> </div> </div>
.container { margin: 100px auto auto 100px; position: relative; width: 190px; height: 266px; /* задаем глубину сцене */ -webkit-perspective: 600px; /* webkit */ -moz-perspective: 600px; /* mozilla */ -ms-perspective: 600px; /* IE 10 */ -o-perspective: 600px; /* opera когда-то тоже должна начать понимать */ perspective: 600px; /* св-во по стандартам */ } #card { /* поворачивать будем общий контейнер */ top: 0; left: 0; width: 100%; height: 100%; position: absolute; -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; -ms-transition: -moz-transform 0.5s; -o-transition: -o-transform 0.5s; transition: transform 0.5s; /* трансформации будут происходить анимированно продолжительностью 0.5 сек */ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; /* указываем, что дочерние элементы находятся в 3D пространстве */ } #card.flip { /* добавляя этот класс, поворачиваем контейнер на 180 градусов */ -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -ms-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); } figure { width: 100%; height: 100%; position: absolute; display: block; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; /* если элемент "отвернулся" от пользователя, контент этого элемента не виден */ } .back { background: url(../../../collect/html-and-css-tricks/css-effects/card-back.png); } .front { background: url(../../../collect/html-and-css-tricks/css-effects/card-front.png); -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -ms-transform: rotateY(180deg); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); /* в начальном положении фэйс карты к нам развернут на 180 градусов */ }
Чтобы запустить анимацию достаточно контейнеру card добавить класс flip. Демо.
Поворот объемного объекта
Для этого добавляем объекту глубины и грани. В качестве примера повернем книгу.
<div class="container" id="container"> <div id="book"> <figure class="back"></figure> <figure class="front"></figure> <figure class="left-1"></figure> <figure class="left-2"></figure> <figure class="right"></figure> </div> </div>
left-1 и left-2 — это одна грань книги. Разбита на две части чтобы придать торцу книги выпуклости (для большей реалистичности нужно большее число составляющих грани).
.container { margin: 100px auto auto 100px; position: relative; width: 226px; height: 316px; /* задаем глубину сцене */ -webkit-perspective: 600px; /* webkit */ -moz-perspective: 600px; /* mozilla */ -ms-perspective: 600px; /* IE 10 */ -o-perspective: 600px; /* opera когда-то тоже должна начать понимать */ perspective: 600px; /* св-во по стандартам */ } #book { /* поварачивать будет общий контейнер */ top: 0; left: 0; width: 100%; height: 100%; position: absolute; -webkit-transition: -webkit-transform 1.5s; -moz-transition: -moz-transform 1.5s; -ms-transition: -moz-transform 1.5s; -o-transition: -o-transform 1.5s; transition: transform 1.5s; /* трансформации будут происходить анимированно продолжительностью 0.5 сек */ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; /* указываем, что дочерние элементы находятся в 3D пространстве */ } #book.flip { /* добавляя этот класс, поворачиваем контейнер на 180 градусов */ -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -ms-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); } figure { position: absolute; display: block; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; /* если элемент отвернут лицом от пользователя, контент этого элемента не виден */ } .back, .front, .left-1, .left-2, .right { background: url(../../../collect/html-and-css-tricks/css-effects/book-texture.jpg); } .front { width: 100%; height: 100%; background-position: -276px 0; -webkit-transform: rotateY( 0deg ) translateZ( 25px ); -moz-transform: rotateY( 0deg ) translateZ( 25px ); -ms-transform: rotateY(0deg) translateZ( 25px ); -o-transform: rotateY( 0deg ) translateZ( 25px ); transform: rotateY( 0deg ) translateZ( 25px ); /* rotateY - поворачиваем грань на нужный угол translateZ - т.к. объект имеет толщину */ } .back { width: 100%; height: 100%; -webkit-transform: rotateY( 180deg ) translateZ( 25px ); -moz-transform: rotateY( 180deg ) translateZ( 25px ); -ms-transform: rotateY(180deg) translateZ( 25px ); -o-transform: rotateY( 180deg ) translateZ( 25px ); transform: rotateY( 180deg ) translateZ( 25px ); /* в начальном положении фэйс карты к нам развернут на 180 градусов */ } /* придаем выпуклости торцу разбиваем его на две части и ставим их под небольшим углом друг к другу */ .left-1 { background-position: -250px 0; width: 28.5px; /* тут я немного схалтурил. реально размер половины грани равен 25px и при этом значении оставалась дырка между гранями в этом примере не стал пересчитывать толщину книги с учетом потерь из-за "выпуклости" торца */ height: 100%; -webkit-transform: rotateY( -70deg ) translate3d(-3px, 0, 8px ); -moz-transform: rotateY( -70deg ) translate3d(-3px, 0, 8px ); -ms-transform: rotateY(-70deg) translate3d( -3px, 0, 8px ); -o-transform: rotateY( -70deg ) translate3d( -3px, 0, 8px ); transform: rotateY( -70deg ) translate3d( -3px, 0, 8px ); /* 8 получаем из решения прямоугольного треугольника (по известному углу и гипотенузе вычисляем катет) online решить можно тут http://www.fxyz.ru/ -3 - костыль, подобранный в ручную для этого примера */ -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; /* поворачиваю торцы вокруг их левой границы: так проще потом расположить элемент (в данном случае) */ } .left-2 { background-position: -225px 0; width: 28px; height: 100%; -webkit-transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px ); -moz-transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px ); -ms-transform: rotateY(-110deg) translate3d( -24.5px, 0, 8px ); -o-transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px ); transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px ); /*24.5 - тоже из решения прямоугольного треугольника - второй катет */ -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .right { background-position: -276px 0; width: 50px; height: 100%; -webkit-transform: rotateY( 90deg ); -moz-transform: rotateY( 90deg ); -ms-transform: rotateY(90deg); -o-transform: rotateY( 90deg ); transform: rotateY( 90deg ); top: 0; right: 0; }
Демо.
На момент написания заметки поддержка:
- IE 10
- Firefox
- Safari
- Chrome
- iOs Safari
- Android
Показать комментарии