Форум

Sigizmund2012 · #1 (**permalink**) 24.03.2016, 14:46

Здравствуйте. Пробую использовать данное правило совместно с transition и псевдоэлементами, но браузеры уж очень коряво рендерят анимацию. Вот результат http://hismith.smartfreelancer.ru/

При наведении на столбец происходит вращение. Кто-нибудь решал уже такую проблему, и если да, то как?
Код:

Код:

.jaluzi {
  display: flex;
  flex-direction: row;
  height: 90%; }
  .jaluzi__elem {
    width: 100%; }
    .jaluzi__elem:hover .jaluzi__column-content {
      transform: rotateY(180deg);
      transition: transform 1s; }
  .jaluzi__column-content {
    background: linear-gradient(to right, #b2b6bc 0%, #f4f4f5 25%);
    padding: 85px 0 0;
    transition: transform 1s;
    position: relative; }
    .jaluzi__column-content:before {
      content: "";
      position: absolute;
      background: url("../img/train.jpg") center no-repeat;
      background-size: cover;
      transform: rotateY(-180deg);
      z-index: -1;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0; }

Dilettante_Pro · #2 (**permalink**) 25.03.2016, 16:20

Предлагаю посмотреть такой вариант:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
body {
  margin: 0;
  background: #B3E5D4;
}
div#d1 {position:absolute;
     top:10px;
     left:10px;
}
 div#d2 {position:absolute;
     top:10px;
     left:110px;
} 
 div#d3 {position:absolute;
     top:10px;
     left:210px;
}       
div {
  width: 100px;
  height: 200px;
}
img {
  position: absolute;
  width:100%; }
  
div:hover .front {  
 transform: rotateY(180deg);
 transition: all 1s ease;
}
div:hover .back {  
 transform: rotateY(180deg);
 transition: all 1s ease;
}

.front {
  z-index: 2;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.back {
  z-index: 0;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
   
</style>
</head>
<body>
<div id="d1">
  <img src="http://javascript.ru/cat/list/js.gif" class="front">
  <img src="http://javascript.ru/cat/list/donkey.gif" class="back">
</div>
<div id="d2">
  <img src="http://javascript.ru/cat/list/js.gif" class="front">
  <img src="http://javascript.ru/cat/list/donkey.gif" class="back">
</div>
<div id="d3">
  <img src="http://javascript.ru/cat/list/js.gif" class="front">
  <img src="http://javascript.ru/cat/list/donkey.gif" class="back">
</div>
</body>
</html>

Жалко, что hover есть, а hout нет

Попробую еще покрутить с mouseout

Dilettante_Pro · #3 (**permalink**) 29.03.2016, 15:25

Вариант с mouseover mouseout

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
body {
  margin: 0;
  background: #B3E5D4;
}
div#d1 {position:absolute;
     top:10px;
     left:10px;
}
 div#d2 {position:absolute;
     top:10px;
     left:110px;
} 
 div#d3 {position:absolute;
     top:10px;
     left:210px;
}       
div.item {
  width: 100px;
  height: 100px;
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;	   
}
div.front {
  position: absolute;
  width:100%;
  display:block; 
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;  
  }
div.back {
  position: absolute;
  width:100%;
  display:block; 
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;  
  } 
 img 
 { width:100%;
     }  
  
 .rot  {
   -webkit-transform: rotateY(180deg);  
   transform: rotateY(180deg);
  }

.front {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);	
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
    window.onload = function () {

        $('.container').on('mouseover', function () {
            $(this).find('.item').toggleClass('rot');
        });
        $('.container').on('mouseout', function () {
            $(this).find('.item').toggleClass('rot');
        });
    }
</script>
</head>
<body>
<div class='container'>
<div id="d1" class='item'>
  <div class="back"><img src="http://javascript.ru/cat/list/js.gif"></div>
  <div class="front"><img src="http://javascript.ru/cat/list/donkey.gif"></div>
</div>
</div>
<div class='container'>
<div id="d2" class='item'>
  <div class="back"><img src="http://javascript.ru/cat/list/js.gif"></div>
  <div class="front"><img src="http://javascript.ru/cat/list/donkey.gif"></div>
</div>
</div>
<div class='container'>
<div id="d3" class='item'>
  <div class="back"><img src="http://javascript.ru/cat/list/js.gif"></div>
  <div class="front"><img src="http://javascript.ru/cat/list/donkey.gif"></div>
</div>
</div>
</body>
</html>

Sigizmund2012 · #4 (**permalink**) 01.04.2016, 09:32

Dilettante_Pro,
Спасибо. Я в принципе сам примерно так и сделал.

Форум

Справочник

Discord чат

Курсы javascript