1

所以我正在处理我的这个项目，我正在尝试设置一些 3d CSS 效果 - 我在 Chrome 上尝试过，效果很好，FireFox 看起来很棒，但 IE 让我哭了。

问题是当我将鼠标悬停在 IE10 上时，我看不到它的背面。你可以在THIS PLACE的chrome 上看到它——这就是我希望它在 IE 中做的事情——但我怎么能做到这一点 D:! 我尝试设置子元素的透视图，还有变换，但它们什么也没做 D:!

有人有想法么？

我试过了，但它仍然无法正常工作，除非我当然读错了。

这是一些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);
}
4

1 回答 1

0

这最终解决了我的问题->

演示在这里 -演示

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 中不起作用。有一些变化 - 不是让“卡片”轮流，而是让“容器 = 面板”轮流。

于 2013-06-29T09:49:18.407 回答