用CSS创建倒装卡 [英] Creating flip card with CSS

问题描述

我想用CSS创建一个翻转卡动画。
它在Firefox，Chrome，Opera，Safari上运行良好，但我有一个Internet Explorer的问题（再次）...

I'm trying to create a flip card animation with CSS. It works well on Firefox, Chrome, Opera, Safari but I have a problem with Internet Explorer (again)...

看看我做的演示： 的IE\">文本问题

在Firefox，Chrome，Opera和Safari中没有问题！

That's OK in Firefox, Chrome, Opera and Safari !

但是我的文字与Internet Explorer相反...请告诉我在我的代码中？

But my text is inverted with Internet Explorer... Please, tell me what's wrong in my code ?

CSS：

 <style>
    .flip-container {
        -webkit-perspective : 680;
        -ms-perspective: 680;
        -moz-perspective: 680;
        -o-perspective: 680;
        perspective: 680;            
    }

    .flip-container:hover .flipper, .flip-container.hover .flipper  {
        -webkit-transform:rotateY(180deg);
        -moz-transform:rotateY(180deg);
        -ms-transform:rotateY(180deg);
        -o-transform:rotateY(180deg);
        transform: rotateY(180deg);
    }

    .flip-container, .front .back {
        width:480px;
        height:340px;
    }

    .flipper {
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: 2.0s;
        -moz-transition: 2.0s;
        -ms-transition: 2.0s;
        -o-transition: 2.0s;
        transition: 2.0s;
        position: relative;
    }

    .front, .back {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }

    .front {
        z-index: 2;
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);        }

    .back {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
</style>

推荐答案

我添加了Internet Explorer最新版本的更新。

I added an update for latest Internet Explorer versions. It works for each modern desktop browser.

我正确的旋转值：

初始 >：
Front = 0°
Back = -180°

Initial : Front = 0° Back = -180°

悬停：
Front = 180 °
Back = 0°

Hover : Front = 180° Back = 0°

此代码仍需更新以与 IE6 IE7 IE8 兼容：

This code still need to be updated to be compatible with IE6 IE7 IE8 :

<style>
    .flip-container {
        -webkit-perspective : 680;
        -moz-perspective: 680;
        -ms-perspective: 680;
        -o-perspective: 680;
        perspective: 680;   
    }

    /* For Internet Explorer */        
    .flip-container:hover .back, .flip-container.hover .back  {            
        -webkit-transform:rotateY(0deg);
        -moz-transform:rotateY(0deg);
        -ms-transform:rotateY(0deg);
        -o-transform:rotateY(0deg);
        transform: rotateY(0deg); 
    }        

    /* For Internet Explorer */        
    .flip-container:hover .front, .flip-container.hover .front  {                     
        -webkit-transform:rotateY(180deg);
        -moz-transform:rotateY(180deg);
        -ms-transform:rotateY(180deg);
        -o-transform:rotateY(180deg);
        transform: rotateY(180deg);
    }

    .flip-container, .front .back {
        width:480px;
        height:340px;
    }

    .flipper {
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        position: relative;
    }

    .front, .back {        
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;            
        -webkit-transition: 2.0s;
        -moz-transition: 2.0s;
        -ms-transition: 2.0s;
        -o-transition: 2.0s;
        transition: 2.0s;

        position: absolute;
        top: 0;
        left: 0;
    }

    .front {
        z-index:2;           
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

    .back {
        z-index:1;
        -webkit-transform: rotateY(-180deg);
        -moz-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
        -o-transform: rotateY(-180deg);
        transform: rotateY(-180deg);           
    }

</style>

这篇关于用CSS创建倒装卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！