Question

所以我正在研究我的这个项目，我正在尝试设置一些3D CSS效果 - 我在Chrome上试过它并且效果很好，FireFox看起来很棒但是IE让我哭了。

问题是当我将鼠标悬停在IE10上时，我看不到IE10的背面。你可以在THIS PLACE的Chrome上看到它 - 这就是我想要它在IE中做的 - 但我怎么能这样做D :!我尝试在子元素上设置透视图，也尝试设置转换，但它们什么都不做D：！

有人有什么想法吗？

我试过this但是我仍然没有工作，除非我当然读错了。

以下是一些CSS

.panel {
position: relative;
-webkit-perspective: 800px;
-ms-perspective: 800px;
-moz-perspective: 800px;
}
#card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transition: transform 1s;
-ms-transition: transform 1s;
-moz-transition: transform 1s;
}
#card figure {
display: block;
position: relative;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
#card .front {
background: red;
}
#card img {
display: block;
width: 100%;
margin: auto;
}
#card .back {
background: blue;
padding: 5px;
-webkit-transform: rotateY( 180deg );
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
#card:hover{
-webkit-transform: rotateY( 180deg );
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}

Answer 1

这最终解决了我的问题 - ＆gt;

在这里演示 - demo

HTML

<div class="panel">
        <div class="card front">
          <img src="images/panel.svg" height="100%" width="100%"  />
        </div>

        <div class="card back">
          <h4>User Experience</h4>
          <p >
          "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
          </p>
        </div>
         </div>

CSS

.panel
{
-webkit-perspective: 1000;
-ms-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
}
.panel, .card {
width: 80%;
height: 80%;
position:absolute;
top:0;
left:0;
background-color: #fff;
}
.card {
-webkit-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.grid_4 .back {
position: relative;
text-align:center; min-height: 100%;height: auto !important; width: 100%;
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.panel:hover .card {
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
transform: rotateY(360deg);
}

显然问题是Preserve-3D在IE中不起作用。有一些变化 - 而不是让'卡'转动，实际上'容器=面板'转向。

背面可见性在IE10中不起作用？

1 个答案: