Javascript-форум - Как добиться плавного отображения при transform: rotateY( 180deg )?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как добиться плавного отображения при transform: rotateY( 180deg )? (https://javascript.ru/forum/dom-window/62100-kak-dobitsya-plavnogo-otobrazheniya-pri-transform-rotatey-180deg.html)

Как добиться плавного отображения при transform: rotateY( 180deg )?

Здравствуйте. Пробую использовать данное правило совместно с 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; }

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

<!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

Вариант с 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>

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