CSS3 – 3D Flip Animación – IE10 transform-origin: preservar-3d solución

Después de mirar a través de IE10 del blog del desarrollador he encontrado que no admiten la reserva-ajuste 3d.

Ofrecen una solución, pero me parece que no puede conseguir trabajo. Mi siguiente ejemplo funciona en Safari, Chrome y Firefox, pero no IE10. Si alguien pudiera ayudarme a alcanzar este le estaría muy agradecido.

Las cajas deben girar alrededor del eje Y en haga clic en para mostrar texto y un fondo de color verde. Este no es el caso en IE10

Mi ejemplo: http://codepen.io/2ne/pen/zEpge

Parte del código:

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

InformationsquelleAutor 2ne | 2012-11-20

6 Kommentare

  1. 21

    Yo también no podía encontrar un buen ejemplo de esto en cualquier lugar, así que me pasé algunos demasiado tiempo para hacer mi propio.

    Este funciona en todos los navegadores, no tiene que raro 360deg es decir flip, y que incluye una disposición para el contenido estático (que vive en ambos lados de la tarjeta – que necesitaba para poner un ‘tirón’ de botón en la parte superior derecha de ambos lados).

    –He probado con las últimas versiones de Chrome, Firefox, Safari, Opera, e internet explorer.

    http://jsfiddle.net/Tinclon/2ega7yLt/7/

    Edit: funciona También con fondos transparentes: http://jsfiddle.net/Tinclon/2ega7yLt/8/

    El css (por supuesto) incluye IE hacks, así que es un poco largo, pero el html es bastante sencillo:

    <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% { } }
    • muy bonito ! – estoy tratando de puerto infinito flip animación. lo que significa que sigue funcionando. funciona bien en ff/chrome con animation: 3s coinFlip ... pero esto es, sólo se muestra la backface a la inversa… yo necesitaría de alguna manera la mezcla de estas dos cosas juntas.. ¿tienes una idea?
    • Intente esto: jsfiddle.net/Tinclon/2ega7yLt/72 Curiosamente, la «ESTÁTICA» de la parte parpadea un poco en Chrome, pero parece que funciona mejor en todos los otros navegadores.
    • Esta es una gran respuesta, pero sería aún mejor si usted podría explicar exactamente donde el «hack» es.
    • El «hack» se explica en el código en los comentarios: /* IE Hack. A mitad de camino a través de la tarjeta flip, establecer la visibilidad. Mantener el resto de los navegadores visible a través de la tarjeta de flip. */
    • Usted me salvó un montón de tiempo con esto, gracias.
    • usted es el hombre! gracias por esto!
    • mad skills! muchas gracias!
    • Tarde al hilo, pero su código sólo me ayudó un montón! Gracias!

  2. 4

    Aquí es mucho más simple flip algoritmo, que también funciona en 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. 2

    Encontrado la respuesta aquí. Publicado mi propia actualizado el violín aquí – este es el css (yo incluido ms prefijos sólo por razones de brevedad):

    .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);
    }

    Aquí es un controlador de botón para voltear (además de para el evento hover):

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

    Interesante (y algo preocupante) que la respuesta para IE10 es voltear por 360 grados (el «volteado’ de la clase y el evento hover en css). Todavía envolver mi cabeza alrededor de eso.

    Aquí está la esperanza de que implementen preservar-3d pronto.

    • Su ejemplo no funciona en Chrome 30.
  4. 2

    aquí es muy simple, y la versión de Nicholls

    voltear rectángulo

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

    Me dejó sólo el flip código.

    Por cierto, grandes efectos Nicholls !

  5. 2

    Uso de un navegador-determinativo JS o cualquier otro método para aplicar CSS-estilos solo para IE.

    A continuación, utilice el código siguiente:

    .ie .flip-wrapper:hover .back {
        -ms-backface-visibility: visible;
    }
    
    .ie .flip-wrapper:hover .front {
        visibility: hidden;
    }
  6. 1

    Como el OP notas, no hay una respuesta a la pregunta en su blog, pero lamentablemente él no cita:

    Nota La especificación del W3C que define el valor de la palabra clave de preservar-3d para esta propiedad, que indica que el aplanamiento de las que no se realiza. En este momento, Internet Explorer 10 no admite la reserva-3d de palabras clave. Usted puede evitar esto mediante la aplicar manualmente el elemento principal es transformar a cada uno de los elementos secundarios además del hijo del elemento normal de la transformación.

    En resumen, como normal, el Navegador de Microsoft está mal roto.

    En la investigación posterior, parece que el motor de interpolación es incompleto o roto en IE10, aplicando todo en términos de la matriz se transforma causa ‘al azar’ voltea a ocurrir cuando la rotación alrededor de más de un eje que está involucrado. El único método de la matriz de interpolación sería para manejar manualmente todos los interpolación de forma manual. Además, parece que cualquier interpolación donde un ángulo recto está involucrado hará incompatible ‘al azar’ tirón.

    He tenido éxito en la interpolación de la necesaria css, sin embargo (record), el código de miles de líneas. Así que, sí, es decir, se pueden hacer en 3d css, si no te importa pre-compilar y tiempos de espera largos.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein