相关疑难解决方法(0)

以下代码适用于除IE.10之外的所有浏览器.

MSDN网站上说以下(我不明白如何申请):

注意W3C规范为此属性定义了preserve-3d的关键字值,表示不执行展平.目前,Internet Explorer 10不支持preserve-3d关键字.除了子元素的法线变换之外,您还可以通过手动将父元素的变换应用于每个子元素来解决此问题.

https://msdn.microsoft.com/en-gb/library/ie/hh673529(v=vs.85).aspx

我的代码(我出于其他原因使用CSS选择器):

div[class^="flip"] {
  display: inline-block;
}
div[class^="flip"] {
  -webkit-perspective: 800;
  -moz-perspective: 800;
  -ms-perspective: 800;
  -o-perspective: 800;
  perspective: 800;
  width: 313px;
  height: 480px;
  position: relative;
  margin-right: 10px;
  margin-left: 10px;
}
div[class^="flip"] .card.flipped {
  -webkit-transform: rotatey(-180deg);
  -moz-transform: rotatey(-180deg);
  -o-transform: rotatey(-180deg);
  transform: rotatey(-180deg);
}
div[class^="flip"] .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
div[class^="flip"] .card .face {
  width: 100%;
  height: 100%;
  position: …

我正在尝试为某些图像创建翻转动画,当它们翻转时,显示适当的链接文本.这在我测试的所有浏览器中都能很好地工作,但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>

Run Code Online (Sandbox Code Playgroud)

而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; …

我正在构建一个简单的纯css'卡片翻转'动画,它必须在IE10中工作,但遗憾的是我写的不是.

这里有jsFiddle演示或这里有html zip样本

我可以看到他们的演示在IE10中可以看到背面可见性,所以也许我只是忽略了一些愚蠢的东西,也许是一副新鲜的眼睛可能有帮助!

提前致谢!

我有这个代码:

<!--[if !IE]><!-->

.roll-link {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    perspective: 600px;
    perspective-origin: 50% 50%;
}
a{text-decoration: none;}
.roll-link span {
    display: block;
    position: relative;
    padding: 0px 2px;
    transition: all 400ms ease 0s;
    transform-origin: 50% 0% 0px;
    -webkit-transform-origin: 50% 0% 0px;
    -o-transform-origin: 50% 0% 0px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;

    }
.roll-link:hover {
    text-decoration: none;
}
.roll-link:hover span {
    background: none repeat scroll 0% 0% #007B8C;
    transform: translate3d(0px, 0px, -30px) rotateX(90deg);
    -webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
    -o-transform: translate3d(0px, …