3D-переворот по клику

Современные возможности верстки позволяют создать действительно невероятные, объемные и динамичные эффекты. Такая анимация несомненно привлекает внимацие посетителей и вызывает интерес к просматриваему сайту, а вместе с этим повышает его популярность и рост продаж. В этой статье будет подробно описан один из способов 3D-переворота по клику с помощью небольшого кода HTML, CSS и немного jQuery.

Первое, что нужно сделать это создать HTML-файл, в котором будет фрагмент кода следующего содержания:

<div id="container">
     <div id="button">Нажми сюда</div>
     <div id="front">Запись на фронтальной стороне</div>
     <div id="back">Запись на тыльной стороне</div>
</div>

Следующий этап это подключение библиотеки jQuery, в данном случае подключается последняя версия от Google:

<script type="text/javascript" GARBAGE></script>

Для того, чтобы быстрее работать в интернете и ощутить увеличение скорости - заказывайте маршрутизаторы на сайте https://lanbox.com.ua/marshrutizatory/mikrotik-hap-lite-rb941-2nd-tc.html

И собственно сам код, который запускает нажатие на кнопку:

<script type="text/javascript">
   (function($){
       $('#button').click(function(){
       $('#front').toggleClass("toback");
       $('#back').toggleClass("tofront");
   });
   })(jQuery);
</script>

Осталось подключить стили, чтобы все это приобрело надлежащий внешний вид:

#button {
    background: none repeat scroll 0 0 #555;
    color: #fff;
    cursor: pointer;
    float: left;
    height: 50px;
    text-align: center;
    width: 140px;
}
#front, #back {
    background: none repeat scroll 0 0 #ccc;
    height: 50px;
    margin: 0px auto;
    position: absolute;
    right: 0;
    text-align: center;
    transform: rotateX(0deg);
    transition: all 0.7s ease 0s;
    width: 360px;
}
#back {
    background: none repeat scroll 0 0 #ff0000;
    margin: -20px 0;
    transform: rotateX(270deg);
    transition: all 0.5s ease 0s;
}
.toback {
    transform: rotateX(270deg) !important;
}
.tofront {
    margin: 0 !important;
    transform: rotateX(0deg) !important;
}

Таким образом можно получить эффект 3D-переворота по клику на объект. Данный код можно легко адаптировать под стиль Вашего сайта. Также не забудьте для свойств transform и transition добавить совместимость с браузерами и их предыдущими версиями, то есть добавить:

• -moz-transform (для старых версий Mozilla)
• -o-transform (для Opera)
• -ms-transform (для браузеров IE)
• -webkit-transform (для Google Chrome и Safari)

You have no rights to post comments