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

CSS3 - 3D Flip Animation - IE10 transform-origin: сохранение-3d обходное решение

Просматривая IE10 блог разработчика, я обнаружил, что они не поддерживают настройку сохранения-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

4b9b3361

ОТВЕТЫ

Ответ 1

Я также не мог найти хороший пример этого в любом месте, поэтому я потратил на слишком много времени на создание собственного.

Это работает во всех браузерах, не имеет этого странного 360deg IE flip и включает в себя предоставление статического контента (который живет по обеим сторонам карты), который мне нужно было поместить кнопку "flip" в верхнем правом углу обе стороны).

- Я тестировал последние версии 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% { } }

Ответ 2

Вот гораздо более простой флип-алгоритм, который также будет работать в 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>

Ответ 3

Нашел ответ здесь. Написал мой собственный обновленный скрипт здесь - это 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);
}

Вот обработчик кнопки для переключения (в дополнение к событию наведения):

$('button').click(function() {
    $('.card').toggleClass('flipped');
});

Интересный (и несколько тревожный), что ответ для IE10 переворачивается на 360 градусов (событие "flipped" и hover в css). Все еще обертываю мою голову вокруг этого.

В надежде, что они вскоре приступят к сохранению-3d.

Ответ 4

вот очень простая версия Nicholls

перевернутый прямоугольник

#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>

Я оставил только флип-код.

Btw, большие эффекты Nicholls!

Ответ 5

Использовать JS-определитель браузера или любой другой метод для применения стилей CSS только к IE.

Затем используйте следующий код:

.ie .flip-wrapper:hover .back {
    -ms-backface-visibility: visible;
}

.ie .flip-wrapper:hover .front {
    visibility: hidden;
}

Ответ 6

Как отмечает OP, есть ответ на вопрос в их блоге, но, к сожалению, он не quote:

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

В целом, как обычно, браузер Microsoft плохо сломан.

В дальнейшем исследовании кажется, что механизм интерполяции неполный или сломан в IE10; применение всего в терминах матричных преобразований приводит к возникновению "случайных" переворотов при включении вращения более чем на одну ось. Единственным методом матричной интерполяции было бы вручную вручную обрабатывать всю интерполяцию. Кроме того, кажется, что любая интерполяция, в которой задействован прямой угол, приведет к непоследовательному "случайному" перевороту.

Мне удалось интерполировать требуемый css, однако (уменьшен), код длится тысячи строк. Итак, да, IE может делать 3d css, если вы не против предварительной компиляции и долгого ожидания.