Вращение элементов div с преобразованием CSS в IE

У меня есть следующий эффект наведения CSS, который работает правильно во всех браузерах, но не в IE. Это три дива, один родитель, двое детей. Я хочу повернуть родительский div, чтобы отобразить дочерний контент. вы можете увидеть код в https://jsfiddle.net/drz338r9/11/ Я очень ценю любая помощь.

HTML-код:

 <a class="social" href="" target="_blank">
         <div class="front">
         </div>
         <div class="back">
         </div>
  </a>

Код CSS:

      .social {
      float: left;
      width: 100px; 
      height: 100px;    
      position: relative;
     -ms-transform: rotateY(0deg);
     transition: transform .25s ease-out;
     transform-style: preserve-3d;
    }
    .social > div {
      width: 100px; height: 100px;
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    }
    .social >.front {
      transform:translateZ(40px);
      width: 100px; 
      height: 100px; 
      background: red;
    }
    .social >.back {
      background: #3B5998; 
     -ms-transform: rotateY(-100deg) translateZ(40px);
     transform:rotateY(-100deg) translateZ(40px);
       width: 100px; 
        height: 100px; 
       background: black;
    }
    .social:hover {
      -ms-transform: rotateY(100deg);
      transform: rotateY(100deg);
    }

== ОБНОВЛЕНИЕ ==

Основываясь на полезных комментариях, решение можно найти здесь:https://jsfiddle.net/ohqxnxnn/


html css css-transitions css-transforms
person D.B    schedule 20.05.2015    source источник
comment
На какой версии IE вы проверяете? если это похоже на ‹= IE10, используйте префикс поставщика -ms- для свойств css.   -  person Mr_Green    schedule 20.05.2015
comment
да. Я использую IE›=10 и префикс поставщика. Эффекты работают, но по-другому, я не работаю, если мне приходится использовать дополнительные правила.   -  person D.B    schedule 20.05.2015

Ответы (3)


arrow_upward
0
arrow_downward

Как сказали другие пользователи, проблема в том, что IE не поддерживает save-3d.

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

.social {
  float: left;
  width: 100px; 
  height: 100px;    
  position: relative;
}
.social > div {
    width: 100px; height: 100px;
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    transition: transform .25s ease-out;
}
.social > .front {
    width: 100px; 
    height: 100px; 
    background: red;
    transform: translateZ(40px);
}
.social:hover .front {
    transform: rotateY(90deg) translateZ(40px);
}
.social >.back {
     transform:rotateY(-90deg) translateZ(40px);
     width: 100px; 
     height: 100px; 
     background: black;
}

.social:hover .back {
     transform:rotateY(0deg) translateZ(40px);
}
<a class="social" href="" target="_blank">
     <div class="front">
     </div>
     <div class="back">
     </div>
   </a>

person vals    schedule 21.05.2015
comment
Большое спасибо. Отличное решение. - person D.B; 23.05.2015

arrow_upward
0
arrow_downward

Я провел небольшое исследование для вас и посмотрел ваш код. Проблема в том, что IE не полностью поддерживает save-3d. К счастью, здесь есть несколько обходных путей: CSS3 - Трехмерная анимация с переворотом — преобразование-источник IE10: временное решение с сохранением 3D

Надеюсь, это поможет, приятель.

person ARLCode    schedule 20.05.2015

arrow_upward
0
arrow_downward

Подробный ответ на «Решения CSS3 для Internet Explorer» содержится в статье журнала Smashing Magazine, на которую вы можете сослаться: http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-проводник/

Также вы можете включить: http://modernizr.com/docs/

а также

html5shiv

Надеюсь, что это поможет вам,

person UI dev www.bijudesigner.com    schedule 20.05.2015