• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Красивый эффект переворота Flip с помощью CSS (Эффект переворачивания с использованием анимации)
Красивый эффект переворота Flip с помощью CSS
Kosten
Дата: Среда, 22.08.2018, 17:20 | Сообщение 1
Администраторы
Сообщений:18249
Награды: 55


В этом материале рассмотрим эффект flip, который будет отвечать за анимацию, а точнее за полноценный переворот элемента на другую сторону. Где на первой стороне можно написать заголовок, но при наведение курсора произойдет поворот и появится другая сторона, где будет описание. Это как пример, так как его можно задействовать на многих функциях сайта.

Главный плюс в таком трюке, что здесь не задействуется JS-скрипт, так как все создано на чистом CSS3. Безусловно вы встречали на разных сайтах что то похожее, где теперь вы можете выставить такую анимацию на свой сайт, закрепив под него как функционал или материал при переходе.

Приступаем к установке:

HTML

Код
<div class="misanunp-alguedalevel">
  <div class="dtumilopag"> Сайт</div>
  <div class="nilsatodsed"> Zornet.Ru</div>
    </div>

CSS

Код
.misanunp-alguedalevel {
    width:157px;
    height:157px;
    position: relative;
    cursor:pointer;
  transition:1s;
    transform-style: preserve-3d;
    -webkit-transition:1s;
   -webkit-transform-style: preserve-3d;
   -webkit-transform: rotateY(0deg);
    -moz-transition:1s;
   -moz-transform-style: preserve-3d;
   -moz-transform: rotateY(0deg);
}

    .misanunp-alguedalevel:hover {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
    }

.misanunp-alguedalevel .dtumilopag {
    position: absolute;
   width: 100%;
    height: 100%;
  background: #19b727;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

.misanunp-alguedalevel .nilsatodsed {
    position: absolute;
   width: 100%;
    height: 100%;
     background: #4f7eef;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotateY(180deg);
   -moz-backface-visibility: hidden;
    -moz-transform: rotateY(180deg);
}


На этом все.

Демонстрация
Страна: (RU)
Kosten
Дата: Среда, 22.08.2018, 17:34 | Сообщение 2
Администраторы
Сообщений:18249
Награды: 55


Этот уже горизонтальный эффект FLIP, где также все происходит, только переворот происходит в горизонтальном виде. Что можно фактически сделать по всем сторонам, как вам угодно. Останется добавить в стилистику классы, которые будкт отвечать за сторону поворота.

Приступаем к установке:

HTML

Код
    <div class="asunallylau-nchedits">
  <div class="garaysepers">Клик</div>
  <div class="zalodrtesa">Читаем</div>
    </div>


CSS

Код
.asunallylau-nchedits {
    width:197px;
    height:197px;
    position: relative;
  cursor:pointer;
  transition:2s;
    transform-style: preserve-3d;
    -webkit-transition:2s;
   -webkit-transform-style: preserve-3d;
   -webkit-transform: rotateY(0deg);
    -moz-transition:2s;
   -moz-transform-style: preserve-3d;
   -moz-transform: rotateY(0deg);

}

    .asunallylau-nchedits:hover {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
    }
    
.asunallylau-nchedits .garaysepers {
    position: absolute;
   width: 100%;
    height: 100%;
   background: #bd8407;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

.asunallylau-nchedits .zalodrtesa {
    position: absolute;
   width: 100%;
    height: 100%;
    background:#f766c9;
    backface-visibility: hidden;
    transform: rotateX(180deg);
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotateX(180deg);
   -moz-backface-visibility: hidden;
    -moz-transform: rotateX(180deg);
}


Также будет представлена страница для просмотра.

Демонстрация
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Красивый эффект переворота Flip с помощью CSS (Эффект переворачивания с использованием анимации)
  • Страница 1 из 1
  • 1
Поиск: