CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d обходной путь
Просматривая блог разработчиков IE10, я обнаружил, что они не поддерживают настройку preserve-3d.
Они предлагают обходной путь, но я не могу заставить его работать. Мой пример ниже работает в Safari, Chrome и Firefox, но не в IE10. Если бы кто-нибудь мог помочь мне достичь этого, я был бы очень благодарен.
Поля должны вращаться вокруг оси Y при нажатии, чтобы показать текст и зеленый цвет фона. Это не так в IE10
Мой пример: http://codepen.io/2ne/pen/zEpge
Часть кода:
HTML
<div class="flip-wrapper">
<div class="front"></div>
<div class="back">IE10 SUCKS</div>
</div>
CSS
.flip-wrapper {
cursor: pointer;
height: 100%;
-moz-perspective: 1000;
-webkit-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
}
.flip-wrapper .front,
.flip-wrapper .back {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
height: 100%;
position: absolute;
width: 100%;
}
.flip-wrapper .back {
background: none repeat scroll 0 0 #298F68;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-wrapper.flipped {
cursor: default;
-webkit-animation: flip 500ms 1;
-moz-animation: flip 500ms 1;
animation: flip 500ms 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
2ne
6 ответов
Я также не мог найти хороший пример этого где-либо, поэтому я потратил слишком много времени на создание собственного.
Этот работает во всех браузерах, не имеет этого странного 360-градусного переворота IE и включает в себя положение для статического контента (который живет по обе стороны карты - что мне нужно было поместить кнопку "перевернуть" в правом верхнем углу с обеих сторон),
- Я тестировал на последних версиях Chrome, Firefox, Safari, Opera и IE.
http://jsfiddle.net/Tinclon/2ega7yLt/7/
Изменить: Также работает с прозрачным фоном: http://jsfiddle.net/Tinclon/2ega7yLt/8/
CSS (конечно) включает в себя взломы IE, поэтому он немного длинный, но HTML-код довольно прост:
<div class="card">
<div class="content">
<div class="cardFront">FRONT CONTENT</div>
<div class="cardBack">BACK CONTENT</div>
<div class="cardStatic">STATIC CONTENT</div>
</div>
</div>
$('.card').hover(function(){$('.card').toggleClass('applyflip');}.bind(this));
.card {
perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
margin:80px 150px;
width:320px;
height:243px;
vertical-align:top;
position:absolute;
display:block;
font-size:25px;
font-weight:bold;
}
.card .content {
transition: 0.5s ease-out;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
-ms-transition: 0.5s ease-out;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
/* content backface is visible so that static content still appears */
backface-visibility: visible;
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-o-backface-visibility: visible;
-ms-backface-visibility: visible;
border: 1px solid grey;
border-radius: 15px;
position:relative;
width: 100%;
height: 100%;
}
.card.applyflip .content {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
.card .content .cardStatic {
/* Half way through the card flip, rotate static content to 0 degrees */
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
text-align: center;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 100%;
line-height:100px;
}
.card.applyflip .content .cardStatic {
/* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.card .content .cardFront {
background-color: skyblue;
color: tomato;
}
.card .content .cardBack {
background-color: tomato;
color: skyblue;
}
.card .content .cardFront, .card .content .cardBack {
/* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: visible;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
line-height:200px;
border-radius: 14px;
}
.card .content .cardFront, .card.applyflip .content .cardFront {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
}
.card .content .cardBack, .card.applyflip .content .cardBack {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.card .content .cardFront, .card.applyflip .content .cardBack {
/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: visible;
}
.card.applyflip .content .cardFront, .card .content .cardBack {
/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: hidden;
}
@keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-ms-keyframes donothing { 0% { } 100% { } }
Вот гораздо более простой алгоритм переворота, который также будет работать в IE. https://jsfiddle.net/mff4jzd2/8/
JAVASCRIPT:
var state = 0;
$('.container').on('click',function(){
if(state == 0){
state = 1;
$('.front').addClass('flip-front');
$('.back').addClass('flip-back');
}
else{
state = 0;
$('.front').removeClass('flip-front');
$('.back').removeClass('flip-back');
}
});
CSS:
.container{
width:170px;
height:280px;
display:inline-block;
position:relative;
transform: perspective(400px);
cursor:pointer;
}
.front{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:blue;
transform: perspective(400px) rotateY(0deg);
backface-visibility: hidden;
transition: 1.0s;
opacity:1;
box-shadow: 0 8px 6px -6px black;
}
.back{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:green;
transform: perspective(400px) rotateY(-180deg);
backface-visibility: hidden;
transition: 1.0s;
opacity:0;
box-shadow: 0 8px 6px -6px black;
}
.flip-front{
opacity:0;
transform: perspective(400px) rotateY(180deg);
}
.flip-back{
opacity:1;
transform: perspective(400px) rotateY(0deg);
}
HTML:
<div class="container">
<div class="back"></div>
<div class="front"></div>
</div>
Используйте определитель браузера JS или любой другой метод, чтобы применять CSS-стили только к IE.
Затем используйте следующий код:
.ie .flip-wrapper:hover .back {
-ms-backface-visibility: visible;
}
.ie .flip-wrapper:hover .front {
visibility: hidden;
}
Вот очень простая версия Николлса
#container {
position: relative;
height:362px;
width: 282px;
margin: 0 auto;
}
#container div {
position:absolute;
left:0;
top:0;
width:242px;
height: 322px;
padding:20px;
background:#463;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-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;
}
#container:hover div.upper {
-webkit-transform: perspective(800px) rotateY(179.9deg);
-moz-transform: perspective(800px) rotateY(179.9deg);
transform: perspective(800px) rotateY(179.9deg);
}
<div id="container" aria-haspopup="true">
<div class="upper"></div>
</div>
Я оставил только флип-код.
Кстати, отличные эффекты Николлс!
Нашел ответ здесь. Здесь выложил свою обновленную скрипку - это css (я для краткости включил префиксы ms):
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
border: 1px solid #CCC;
-ms-perspective: 1000;
perspective: 1000;
}
.card {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
transition: all 0.5s linear;
backface-visibility: hidden;
}
.card.flipped {
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
.front {
background: red;
}
.back {
background: #00f;
transform: rotateY( 180deg );
}
.container:hover .card {
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
Вот обработчик кнопки для переключения (в дополнение к событию hover):
$('button').click(function() {
$('.card').toggleClass('flipped');
});
Интересно (и несколько тревожно), что ответ для IE10 переворачивается на 360 градусов (класс "перевернутый" и событие hover в css). Все еще оборачиваюсь вокруг этого.
Здесь надеются, что они скоро введут preserve-3d.
Как отмечает ОП, в их блоге есть ответ на вопрос, но, к сожалению, он не цитирует:
Примечание. Спецификация W3C определяет значение ключевого слова preserve-3d для этого свойства, которое указывает, что выравнивание не выполняется. В настоящее время Internet Explorer 10 не поддерживает ключевое слово preserve-3d. Вы можете обойти это, вручную применяя преобразование родительского элемента к каждому из дочерних элементов в дополнение к обычному преобразованию дочернего элемента.
Таким образом, как обычно, браузер Microsoft сильно сломан.
При дальнейшем исследовании кажется, что механизм интерполяции неполный или сломан в IE10; применение всего в терминах матричных преобразований вызывает "случайные" перевороты, когда происходит вращение вокруг более чем одной оси. Единственным методом матричной интерполяции будет ручная обработка всей интерполяции вручную. Кроме того, кажется, что любая интерполяция, в которой задействован прямой угол, вызовет непоследовательное "случайное" переключение.
Мне удалось интерполировать необходимые CSS, однако (минимизировано), код длиной в тысячи строк. Так что, да, IE может сделать 3d CSS, если вы не возражаете против предварительной компиляции и долгого времени ожидания.