CSS翻转代码将不能在IE11中工作 [英] CSS flip code won't work in IE11

问题描述

我想为某些图片创建翻转动画，当他们翻转时，显示相应的链接文字。这在我已经测试的所有浏览器，但IE11完美。

我读到有一个问题与transform-style：preserve-3d;对于IE10，但因为我是一个CSS初学者，我一直无法找出一种方法来纠正编码。

这是HTML：

 < div class =flipcontainer> 
< div class =flipscene3D> 
< div class =flip> 
< div> 
< p> 
< a itemprop =urlhref =ARC3RFC.html>< span itemprop =headline> ARC3RFC作文：Tomb 100，Tomb UJ and Maadi South：Themes from Predynastic Egypt< / span> ;< / a> -  2013 
< / p> 
< / div> 
< div> 
< img src =ARC3RFC.jpgclass =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; 
透视：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：所有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）; 
} 
  

解决方案

动画演示。

请检查 DEMO 。

$ b

这里是HTML代码。 c $ c>< 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）; 
} 
  

I am trying to create a flip animation for some images, which when they turn over, display appropriate link text. This works perfectly in all browsers that I have tested, but IE11.

I read that there is a problem with transform-style: preserve-3d; for IE10, but as I am a CSS beginner, I have been unable to figure out a way to correct the coding.

Here is the 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>

And the 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);
        }

解决方案

Have a look at this Flipping animation Demo. I hope it will solve your problem.

Check the DEMO.

Here is the HTML code look like.

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

Here is the CSS code.

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

这篇关于CSS翻转代码将不能在IE11中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！