0

嗨，我正在尝试制作 css 翻转框，但是当它翻转时不显示下一个框..前框消息是“悬停翻转！” 当我将鼠标放在它上面时，它会翻转并显示消息“！pilf ot revoH”

   --CSS styling--
<style>
.flipper {
    width:200px;
    height:200px;
    position:relative;
    z-index:1;
    margin:10px auto;
}
.flipper {
    perspective: 1000;
}
.flipper .flip {
    -webkit-transition: .75s;
    -webkit-transform-style: presever-3d;
    position:relative;
}
.flipper .flip:hover {
    -webkit-transform: rotateY(180deg);
}
.flipper, .flipper .front, .flipper .back {
    height:150px;
    width:150px;
}
.front {
    position:absolute;
    top:0px;
    left:0px;
    background:#666;
    backface-visibility: hidden;
}
.flipper .front {
    z-index:1;
}
.flipper .back {
    -webkit-transform: rotateY(180deg);
}

</style>


---HTML code---

<div class="fliper">
    <div class="flip">
        <div class="front">Hover to flip!</div>

        <div class="backe">Hello!</div>
    </div>
</div>

任何人都可以建议我我的错误在哪里？

http://jsfiddle.net/isherwood/r9nRR/

4

1 回答 1

0

尝试添加变换样式：

.fliper {
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
}

我看不到你的标记，但你也可以看看这个 tut：

http://davidwalsh.name/css-flip

于 2013-10-17T19:38:51.057 回答