Следующий код работает во всех браузерах, кроме IE.10.
Веб-сайт MSDN говорит следующее (что я не понимаю, как подать заявку):
Примечание. Спецификация W3C определяет значение ключевого слова preserve-3d для этого свойства, что указывает на то, что сглаживание не выполняется. В настоящее время Internet Explorer 10 не поддерживает ключевое слово сохранения-3d. Вы можете обойти это, вручную применив преобразование родительского элемента к каждому из дочерних элементов в дополнение к нормальному преобразованию дочернего элемента.
https://msdn.microsoft.com/en-gb/library/ie/hh673529(v=vs.85).aspx
Мой код (я использую селектор CSS по другим причинам):
div[class^="flip"] {
display: inline-block;
}
div[class^="flip"] {
-webkit-perspective: 800;
-moz-perspective: 800;
-ms-perspective: 800;
-o-perspective: 800;
perspective: 800;
width: 313px;
height: 480px;
position: relative;
margin-right: 10px;
margin-left: 10px;
}
div[class^="flip"] .card.flipped {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-o-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
div[class^="flip"] .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
div[class^="flip"] .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
text-align: center;
}
div[class^="flip"] .card .front {
position: absolute;
z-index: 1;
background: #F5F5F5;
border: #DDD 1px solid;
}
div[class^="flip"] .card .back {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-o-transform: rotatey(-180deg);
transform: rotatey(-180deg);
background: #F5F5F5;
border: #DDD 1px solid;
}
<div class="flip1">
<div class="card">
<div class="face front">Front content</div>
<div class="face back">Back content</div>
</div>
</div>