Подтвердить что ты не робот

Почему скрытая скрытая видимость не работает в IE10, когда перспектива применяется к родительским элементам?

Итак, вот еще один глюк IE10. Проблема в том, что применение перспективы к родительским элементам нарушает скрытую настройку скрытой видимости. Посмотрите эту скрипту: http://jsfiddle.net/2y4eA

Когда вы наводите курсор на красный квадрат, он поворачивается на 180 ° по оси x, и хотя видимость задней поверхности скрыта, отображается обратная сторона, по крайней мере, до достижения 180 °, затем она исчезает, Удалите свойство перспективы, и вы увидите, что он работает так, как ожидалось, обратная сторона не видна вообще, но, конечно, 3D-эффект теряется.

Можно обойти эту проблему, применив перспективу в свойстве transform: http://jsfiddle.net/M2pyb Но это вызовет проблемы со связью с transform-origin-z, когда z установлен на все, кроме 0, все становится "масштабированным": http://jsfiddle.net/s4ndv, к сожалению, это не решение.

Видимая вещь - это, скорее всего, ошибка? Если это так, есть ли какое-нибудь трудоустройство, кроме упомянутого мной?

4b9b3361

ОТВЕТЫ

Ответ 1

Я тоже столкнулся с этим сбоем, и это определенно сбой.

Обходной путь заключается в применении преобразования перспективы дочернего элемента. Я обновил вашу скрипку здесь: http://jsfiddle.net/jMe2c/

.item {
    backface-visibility: hidden;
    transform: perspective(200px) rotateX(0deg);
}
.container:hover .item {
    transform: perspective(200px) rotateX(180deg);
}

(См. также ответ на fooobar.com/questions/110266/...)

Я думаю, что это происходит потому, что в IE 10 родительский элемент 3d-свойства не распространяются на дочерний элемент. Это известная неподдерживаемая функция. Проверьте http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property:

В настоящее время Internet Explorer 10 не поддерживает ключевое слово сохранить-3d. Вы можете обойти это, вручную применив преобразование родительского элемента к каждому из дочерних элементов в дополнение к нормальному преобразованию дочернего элемента.

Таким образом, рекомендованное Microsoft решение заключается в том, чтобы вручную распространять свои 3D-свойства самостоятельно.

Ответ 3

Обходной путь, который я бы себе представлял, - это добавление перехода для непрозрачности, имеющего 0 временного интервала и имеющего задержку в половину вашего перспективного перехода.

.container, .item {
    width: 200px;
    height: 200px;
    opacity:1;
}
.container {
    perspective: 200px;
}
.container:hover .item {
    transform: rotateX(180deg);
    opacity:0;
}
.item {
    background-color: #ff0000;
    backface-visibility: hidden;
    transition: transform 3000ms, opacity 0ms 1500ms;
}

Ответ 4

Я бы предложил прекратить борьбу с IE с помощью свойства перспективы, установленного на всех преобразованных элементах, и начать тестирование для поддержки сохранения-3d. Я последовал за этим парнем, чтобы расширить Modernizr с помощью теста свойств: https://coderwall.com/p/qctclg?comment=This+was+awesome%21+And+exactly+what+i+needed.+Thanks%21+

таким образом, его можно сделать резервным для IE, не имеющим реализации 3D-преобразований, и начать играть с более передовыми возможностями в других браузерах.

иначе IE сделает ваш код слишком запутанным и все же не даст вам те же возможности, что и вращающиеся многогранные 3D-объекты.

.. только мои 2 цента.

Ответ 5

Я реализовал решение, предложенное @torbonaut и @chowey в этом jsfiddle

HTML

<div id='container'>
<div class='backhide bottom'>bottom</div>
<div class='backhide top'>top</div>
</div>

CSS

  #container, .bottom, .top {
    width: 200px;
    height: 300px;
    position: absolute;
    -webkit-transition: 1.5s ease-in-out;
    -moz-transition: 1.5s ease-in-out;
    -ms-transition: 1.5s ease-in-out;
    -o-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;
  }

  .backhide{

    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  #container:hover .bottom {
    -moz-transform: perspective(800px) rotateY(0);
    -webkit-transform: perspective(800px) rotateY(0);
    transform: perspective(800px) rotateY(0);
  }
  #container:hover .top {
    -webkit-transform: perspective(800px) rotateY(-180deg);
    -moz-transform: perspective(800px) rotateY(-180deg);
    transform: perspective(800px) rotateY(-180deg);
  }

  .bottom {
    background-color: #ff0000;
    -moz-transform: perspective(800px) rotateY(180deg);
    -webkit-transform: perspective(800px) rotateY(180deg);
    transform: perspective(800px) rotateY(180deg);
  }

  .top {
    background-color: #e0e0e0;


    -moz-transform: perspective(800px) rotateY(0deg);
    -webkit-transform: perspective(800px) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg);

  }