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

[Sigizmund]

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

 

[Igor Schnaider]

Так а в чем проблема-то, что коряво?

[Sigizmund]

20 минут назад, Igor Schnaider сказал:

Так а в чем проблема-то, что коряво?

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

[Igor Schnaider]

Это все к вопросу о пресловутом stacking context.

В вашем случае лучше использовать два элемента внутри обертки. http://codepen.io/anon/pen/remXzZ?editors=1100

[Sigizmund]

8 часов назад, Igor Schnaider сказал:

Это все к вопросу о пресловутом stacking context.

В вашем случае лучше использовать два элемента внутри обертки. http://codepen.io/anon/pen/remXzZ?editors=1100

Большое спасибо, вот что получилось в результате

http://hismith.smartfreelancer.ru/

Но всё равно, при анимации линии рваные, иногда пикселизация видна. Есть ли способ сгладить всё это? Да, в Мозилле баги.