br 8eb34


search

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

3rotateСовременные возможности верстки позволяют создать действительно невероятные, объемные и динамичные эффекты. Такая анимация несомненно привлекает внимацие посетителей и вызывает интерес к просматриваему сайту, а вместе с этим повышает его популярность и рост продаж. В этой статье будет подробно описан один из способов 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>

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

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

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

#container {
    display: inline-block;
    position: relative;
    width: 500px;
    line-height: 45px;
}

#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)

 

demo

Комментарии  

#6 Dogica 13.04.2016 09:29
Хороший эффект
Тока давно уже на чистом CSS он воспроизведен

www.dogica.com
#5 Sasha 15.03.2016 06:20
Прочитал я Вашу статью по поводу того, как обрабатываются пакеты, вот да, реально когда мусор жгут, то реально и отходы полиэтиленовые как-то там читал статью, ну давно, что они более-менее загрязняющие по сравненмию с бумажными. Гарь
#4 Sasha 05.03.2016 17:22
ну почему Вы не пишите?
#3 Sasha 02.03.2016 19:00
Извините а как оноработает ведь фронт занимает всю область контейнера и нету з индекс Тогда получается что оно не нажмется Ведь так?
#2 Sasha 01.03.2016 21:00
Ну как Вам видео В принципе должно было понравится Там еще на моем канале есть видео про то как по типу забой по объявлениям класс посмотрите внимательно Может получится Вам с техником разобраться
#1 Sasha 28.02.2016 15:07
Добрчй день Извините набираю с мобильного Классно придумано насчет о трансформ Так я Вам предлагаю портал на котором проводится торговля как оптом так и в розницу по адресу http://m.youtube.com/watch?v=sgNSa5cdHGw&hl=ru Классный портал я Вам предлагаю установить на него рекламу будь то гугол или какого то офис журнала и Вы можете через 2 месяца посмотреть первую прибыль а также заинтересоватьс я как его переверстать Добавляйте тут коментарии Я вам все отвечу

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

Защитный код
Обновить

Комментарии