Question

我正在尝试为某些图片创建一个翻转动画，当它们翻过来时，会显示相应的链接文字。这适用于我测试的所有浏览器，但IE11。

我读到transform-style存在问题：preserve-3d;对于IE10，但由于我是CSS初学者，我一直无法找到纠正编码的方法。

这是HTML：

  <div class="flipcontainer">
    <div class="flipscene3D">
        <div class="flip">
            <div>
                <p>
                    <a itemprop="url" href="ARC3RFC.html"><span itemprop="headline">ARC3RFC Essay: Tomb 100, Tomb U-J and Maadi South: Themes from Predynastic Egypt</span></a> - 2013
                </p>
            </div>
            <div>
                <img src="ARC3RFC.jpg" class="flipimg">
            </div>
        </div>
    </div>
</div>

CSS：

img.flipimg {
            height: 150px;
            width: 150px;
            /*border-radius*/
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
        .flipcontainer {
            display: block;
            width: 760px;
            height: 700px;
            margin: 30px auto;
        }
        .flipscene3D {
            display: block;
            float: left;
            margin: 10px;
            /*border-radius*/
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            /*perspective*/
            -webkit-perspective: 300px;
            -moz-perspective: 300px;
            -ms-perspective: 300px;
            -o-perspective: 300px;
            perspective: 300px;
        }
        .flip div {
        position: absolute;
        width: 150px;
        height: 150px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 500
        }
        .flip div:first-child {
            font-size: 12px;
            /*border-radius*/
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background: #333;
            /*transform*/
            -webkit-transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
            -ms-transform: rotateX(180deg);
            -o-transform: rotateX(180deg);
            transform: rotateX(180deg);
        }
        .flip div:first-child p {
            color: #FFF;
            text-shadow: 0 0 1px .111;
            padding-top: 10px;
            text-align: center;
        }
        .flip {
            width: 150px;
            height: 150px;
            /*border-radius*/
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            /*box-shadow*/
            -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.3);
            -moz-box-shadow: 0 0 15px rgba(0,0,0,0.3);
            box-shadow: 0 0 15px rgba(0,0,0,0.3);
            /*transform*/
            -webkit-transform: rotateX(0deg);
            -moz-transform: rotateX(0deg);
            -ms-transform: rotateX(0deg);
            -o-transform: rotateX(0deg);
            transform: rotateX(0deg);
            /*transition*/
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            transition: all 1s ease;
            /*transform-style*/
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        .flipscene3D:hover .flip {
            /*transform*/
            -webkit-transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
            -ms-transform: rotateX(180deg);
            -o-transform: rotateX(180deg);
            transform: rotateX(180deg);
        }

Answer 1

看看这个Flipping动画演示。我希望它能解决你的问题。

检查 DEMO 。

以下是HTML代码。

<div class="wrapper">
    <div class="front anim">
        Chrome
    </div>
    <div class="back anim"> 
        IE
    </div>
</div>

以下是CSS代码。

.wrapper {
    width: 300px;
    height: 300px;
    margin: auto;
    position: relative;
}

.anim {
    width: 100%;
    height: 100%;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
}

.front {
    z-index: 2;
    background: url(http://lorempixel.com/300/300/) no-repeat;
}

.back {
    z-index: 1;
    -webkit-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);  
    transform: rotateX(-180deg);  
    background: url(http://placehold.it/300x300) no-repeat;
}

.wrapper:hover .front {
    z-index: 1;
    -webkit-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.wrapper:hover .back {
    z-index: 2;   
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

Answer 2

   .flipscene3D:hover .flip {
        /*transform*/
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        -ms-transform: rotateX(180deg);
        -o-transform: rotateX(180deg);
        transform: rotateX(180deg);
       filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1,
        M12=1.2246467991473532e-16,
        M21=-1.2246467991473532e-16,
        M22=-1,
        SizingMethod='auto expand'); 
    }

CSS翻转代码在IE11中无法使用

2 个答案: