Показать сообщение отдельно
  #1 (permalink)  
Старый 24.03.2016, 14:46
Аватар для Sigizmund2012
Профессор
Отправить личное сообщение для Sigizmund2012 Посмотреть профиль Найти все сообщения от Sigizmund2012
 
Регистрация: 16.07.2014
Сообщений: 267

Как добиться плавного отображения при 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; }
Ответить с цитированием