Блоки поворачиваются при наведении / Блоки / Сниппеты Bootstrap

Блоки поворачиваются при наведении

Блоки вёрстки Bootstrap 3 будут горизонтально поворачиваться при наведении, готовый HTML демо пример для установки на сайт.

* Обратите внимание скрипты нужны только для использования среднего блока поворачивающегося в ручную, крайним с лева и с права достаточно стилей.

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Блоки

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 392

Количество символов:

Посмотрели: 4985 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 4.7 / 5 - 6 голосов

Тип лицензии: CC BY 4.0

Авторство: http://u.to/YEOwDQ

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, Вращение, блок, сниппет, Bootstrap, rotate, html, Block

Поделился: IZOTOP

Добавлено: 2016-01-17 в 21:30

Метка: 1581763568

⇄ ⇅

<script src="https://bootstraptema.ru/plugins/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://bootstraptema.ru/plugins/2015/b-v3-3-6/bootstrap.min.js"></script>

.card-container.static:hover .card, 
.card-container.static.hover .card {
 -webkit-transform: none;
-moz-transform: none;
 -o-transform: none;
 transform: none;
}
/* flip speed goes here */
.card {
 -webkit-transition: -webkit-transform .5s;
 -moz-transition: -moz-transform .5s;
 -o-transition: -o-transform .5s;
 transition: transform .5s;
-webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 transform-style: preserve-3d;
 position: relative;
}

/* hide back of pane during swap */
.front, .back {
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -o-backface-visibility: hidden;
 backface-visibility: hidden;
 position: absolute;
 top: 0;
 left: 0;
 background-color: #FFF;
 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
}

/* front pane, placed above back */
.front {
 z-index: 2;
}

/* back, initially hidden pane */
.back {
 -webkit-transform: rotateY( 180deg );
 -moz-transform: rotateY( 180deg );
 -o-transform: rotateY( 180deg );
 transform: rotateY( 180deg );
 z-index: 3;
}

.back .btn-simple{
 position: absolute;
 left: 0;
 bottom: 4px;
}
/* Style */

.card{
 background: none repeat scroll 0 0 #FFFFFF;
 border-radius: 4px;
 color: #444444;
}
.card-container, .front, .back {
 width: 100%;
 height: 420px;
 border-radius: 4px;
}
.card .cover{
 height: 105px;
 overflow: hidden;
 border-radius: 4px 4px 0 0;
}
.card .cover img{
 width: 100%;
}
.card .user{
 border-radius: 50%;
 display: block;
 height: 120px;
 margin: -55px auto 0;
 overflow: hidden;
 width: 120px;
}
.card .user img{
 background: none repeat scroll 0 0 #FFFFFF;
 border: 4px solid #FFFFFF;
 width: 100%;
}

.card .content{
 background-color: rgba(0, 0, 0, 0);
 box-shadow: none;
 padding: 10px 20px 20px;
}
.card .content .main {
 min-height: 160px;
}
.card .back .content .main {
 height: 215px;
}
.card .name {
 font-size: 22px;
 line-height: 28px;
 margin: 10px 0 0;
 text-align: center;
 text-transform: capitalize;
}
.card h5{
 margin: 5px 0;
 font-weight: 400;
 line-height: 20px;
}
.card .profession{
 color: #999999;
 text-align: center;
 margin-bottom: 20px;
}
.card .footer {
 border-top: 1px solid #EEEEEE;
 color: #999999;
 margin: 30px 0 0;
 padding: 10px 0 0;
 text-align: center;
}
.card .footer .social-links{
 font-size: 18px;
}
.card .footer .social-links a{
 margin: 0 7px;
}
.card .footer .btn-simple{
 margin-top: -6px;
}
.card .header {
 padding: 15px 20px;
 height: 90px;
}
.card .motto{
 border-bottom: 1px solid #EEEEEE;
 color: #999999;
 font-size: 14px;
 font-weight: 400;
 padding-bottom: 10px;
 text-align: center;
}

/* Just for presentation */

.title{
 color: #506A85;
 text-align: center;
 font-weight: 300;
 font-size: 44px;
 margin-bottom: 90px;
 line-height: 90%;
}
.title small{
 font-size: 17px;
 color: #999;
 text-transform: uppercase;
 margin: 0;
}
.space-50{
 height: 50px;
 display: block;
}
.space-200{
 height: 200px;
 display: block;
}
.white-board{
 background-color: #FFFFFF;
 min-height: 200px;
 padding: 60px 60px 20px;
}
.ct-heart{
 color: #F74933;
}

pre.prettyprint{
 background-color: #ffffff;
 border: 1px solid #999;
 margin-top: 20px;
 padding: 20px;
 text-align: left;
}
.atv, .str{
 color: #05AE0E;
}
.tag, .pln, .kwd{
 color: #3472F7;
}
.atn{
 color: #2C93FF;
}
.pln{
 color: #333;
}
.com{
 color: #999;
}

.btn-simple{
 opacity: .8;
 color: #666666;
 background-color: transparent;
}

.btn-simple:hover,
.btn-simple:focus{
 background-color: transparent;
 box-shadow: none;
 opacity: 1;
}
.btn-simple i{
 font-size: 16px;
}

.navbar-brand-logo{
 padding: 0;
}
.navbar-brand-logo .logo{
 border: 1px solid #333333;
 border-radius: 50%;
 float: left;
 overflow: hidden;
 width: 60px;
}
.navbar .navbar-brand-logo .brand{
 color: #FFFFFF;
 float: left;
 font-size: 18px;
 font-weight: 400;
 line-height: 20px;
 margin-left: 10px;
 margin-top: 10px;
 width: 60px;
}
.navbar-default .navbar-brand-logo .brand{
 color: #555;
}

/* Fix bug for IE */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 .front, .back{
 -ms-backface-visibility: visible; 
 backface-visibility: visible;
 }
 
 .back {
 visibility: hidden;
 -ms-transition: all 0.2s cubic-bezier(.92,.01,.83,.67);
 }
 .front{
 z-index: 4;
 }
 .card-container:not(.manual-flip):hover .back,
 .card-container.manual-flip.hover .back{
 z-index: 5;
 visibility: visible;
 }
}
</style>

<div class="col-sm-10 col-sm-offset-1">
 <div class="col-md-4 col-sm-6">
 <div class="card-container">
 <div class="card">
 <div class="front">
 <div class="cover">
 <img src="https://bootstraptema.ru/snippets/block/2016/rotate-block/rotating_card_thumb2.png"/>
 </div>
 <div class="user">
 <img class="img-circle" src="https://bootstraptema.ru/snippets/block/2016/rotate-block/rotating_card_profile3.png"/>
 </div>
 <div class="content">
 <div class="main">
 <h3 class="name">John Marvel</h3>
 <p class="profession">CEO</p>
 <h5><i class="fa fa-map-marker fa-fw text-muted"></i> Paris, France</h5>
 <h5><i class="fa fa-building-o fa-fw text-muted"></i> Creative Tim Inc. </h5>
 <h5><i class="fa fa-envelope-o fa-fw text-muted"></i> john@creative-tim.com</h5>
 </div>
 <div class="footer">
 <div class="rating">
 <i class="fa fa-star"></i>
 <i class="fa fa-star"></i>
 <i class="fa fa-star"></i>
 <i class="fa fa-star"></i>
 </div>
 </div>
 </div>
 </div>

<div class="back">
 <div class="header">
 <h5 class="motto">"To be or not to be, this is my awesome motto!"</h5>
 </div> 
 <div class="content">
 <div class="main">
 <h4 class="text-center">Experience</h4>
 <p>In the project since 2011</p>
 <h4 class="text-center">Areas of Expertise</h4>
 <p>Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...</p>
 </div>
 </div>
 <div class="footer">
 <div class="social-links text-center">
 <a href="#" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>
 <a href="#" class="google"><i class="fa fa-google-plus fa-fw"></i></a>
 <a href="#" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>
 </div>
 </div>
 </div> 
 </div> 
 </div> 
 </div>

<div class="col-md-4 col-sm-6">
 <div class="card-container manual-flip">
 <div class="card">
 <div class="front">
 <div class="cover">
 <img src="https://bootstraptema.ru/snippets/block/2016/rotate-block/rotating_card_thumb.png"/>
 </div>
 <div class="user">
 <img class="img-circle" src="https://bootstraptema.ru/snippets/block/2016/rotate-block/rotating_card_profile2.png"/>
 </div>
 <div class="content">
 <div class="main">
 <h3 class="name">Andrew Mike</h3>
 <p class="profession">Web Developer</p>
 <h5><i class="fa fa-map-marker fa-fw text-muted"></i> Bucharest, Romania</h5>
 <h5><i class="fa fa-building-o fa-fw text-muted"></i> Creative Tim Inc. </h5>
 <h5><i class="fa fa-envelope-o fa-fw text-muted"></i> mike@creative-tim.com</h5>
 </div>
 <div class="footer">
 <button class="btn btn-simple" onclick="rotateCard(this)">
 <i class="fa fa-mail-forward"></i> Manual Flip
 </button>
 </div>
 </div>
 </div>

<div class="back">
 <div class="header">
 <h5 class="motto">"To be or not to be, this is my awesome motto!"</h5>
 </div> 
 <div class="content">
 <div class="main">
 <h4 class="text-center">Experience</h4>
 <p>Mike was working with our team since 2012.</p>
 <h4 class="text-center">Areas of Expertise</h4>
 <p>Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...</p>
 </div>
 </div>
 <div class="footer">
 <button class="btn btn-simple" rel="tooltip" title="Flip Card" onclick="rotateCard(this)">
 <i class="fa fa-reply"></i> Back
 </button>
 <div class="social-links text-center">
 <a href="#" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>
 <a href="#" class="google"><i class="fa fa-google-plus fa-fw"></i></a>
 <a href="#" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>
 </div>
 </div>
 </div> 
 </div> 
 </div> 
 </div>

<div class="col-md-4 col-sm-6">
 <div class="card-container">
 <div class="card">
 <div class="front">
 <div class="cover">
 <img src="https://bootstraptema.ru/snippets/block/2016/rotate-block/rotating_card_thumb3.png"/>
 </div>
 <div class="user">
 <img class="img-circle" src="https://bootstraptema.ru/snippets/block/2016/rotate-block/rotating_card_profile.png"/>
 </div>
 <div class="content">
 <div class="main">
 <h3 class="name">Inna Corman</h3>
 <p class="profession">Product Manager</p>
 <h5><i class="fa fa-map-marker fa-fw text-muted"></i> Paris, France</h5>
 <h5><i class="fa fa-building-o fa-fw text-muted"></i> Creative Tim Inc. </h5>
 <h5><i class="fa fa-envelope-o fa-fw text-muted"></i> inna@creative-tim.com</h5>
 </div>
 <div class="footer">
 <div class="rating">
 <i class="fa fa-star"></i>
 <i class="fa fa-star"></i>
 <i class="fa fa-star"></i>
 </div>
 </div>
 </div>
 </div>

<div class="back">
 <div class="header">
 <h5 class="motto">"To be or not to be, this is my awesome motto!"</h5>
 </div> 
 <div class="content">
 <div class="main">
 <h4 class="text-center">Experience</h4>
 <p>Inna was working with our team since 2012.</p>
 <h4 class="text-center">Areas of Expertise</h4>
 <p>Web design, Adobe Photoshop, HTML5, CSS3, Corel and many others...</p>
 </div>
 </div>
 <div class="footer">
 <div class="social-links text-center">
 <a href="#" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>
 <a href="#" class="google"><i class="fa fa-google-plus fa-fw"></i></a>
 <a href="#" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>
 </div>
 </div>
 </div> 
 </div> 
 </div> 
 </div> 
 </div> 
 
 </div>

</div>

<script>
 function rotateCard(btn){
 var $card = $(btn).closest('.card-container');
 console.log($card);
 if($card.hasClass('hover')){
 $card.removeClass('hover');
 } else {
 $card.addClass('hover');
 }
 }
</script>

BootstrapTema

Блоки поворачиваются при наведении

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0