相关疑难解决方法(0)

好的,所以这是另一个IE10故障.问题是在父元素上应用透视会破坏背面可见性隐藏设置.请看这个小提琴:http://jsfiddle.net/2y4eA

当您将鼠标悬停在红色方块上时,它会在x轴上旋转180°,即使背面可见性设置为隐藏,也会显示背面,至少在达到180°之前,它会消失.删除透视属性,您将看到它按预期工作,背面根本不可见,但当然3D效果丢失.

通过在transform属性中应用透视可以解决这个问题:http://jsfiddle.net/M2pyb但这会导致与transform-origin-z结合的问题,当z被设置为0以外的任何东西时,整个事情变得"缩放":http://jsfiddle.net/s4ndv所以不幸的是,这不是一个解决方案.

背面可见的东西可能是一个错误？如果是这样,除了我提到的那个之外,还有其他工作吗？

在浏览IE10的开发人员博客后,我发现他们不支持preserve-3d设置.

他们确实提供了一种解决方法,但我似乎无法让它发挥作用.我的示例适用于Safari,Chrome和Firefox,但不适用于IE10.如果有人能帮我实现这一目标,我将非常感激.

单击时,框应围绕Y轴旋转,以显示一些文本和绿色背景颜色.在IE10中并非如此

我的例子: http ://codepen.io/2ne/pen/zEpge

部分代码:

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: …

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