css - div 中的 3d 立方体向后旋转文本

Question

我有一个 3d 立方体旋转，它发生在悬停时。除了一件事，一切都很好。当您翻身时，立方体旋转并显示带有文字的新面....文字是倒着的，不知道为什么会这样。我设置了一个 JS fiddle ，如果我能在这方面得到任何帮助，那就太好了。

http://jsfiddle.net/c3ewZ/6/

html:

回来了

<div class='box-scene col-xs-12 col-sm-3'>
    <div class='box'>
        <div class='front face'></div>
        <div class="side face">
            <p>This is back</p>
        </div>
    </div>
</div>
<div class='box-scene col-xs-12 col-sm-3'>
    <div class='box'>
        <div class='front face'></div>
        <div class="side face">
            <p>This is back</p>
        </div>
    </div>
</div>
<div class='box-scene col-xs-12 col-sm-3'>
    <div class='box'>
        <div class='front face'></div>
        <div class="side face">
            <p>This is back</p>
        </div>
    </div>
</div>

CSS

body {
        margin:0px;
        padding:0px;
    }
    .box-scene {
        -webkit-perspective: 700;
        height: 180px;
        float:left;
        z-index: 999;
        padding:0px !important;
    }
    .box-scene:hover .box {
        -webkit-transform: rotateY(90deg);
    }
    .box {
        width: 100%;
        height: 100%;
        position: relative;
        -webkit-transform-style: preserve-3d;
        -webkit-transition: all 0.4s ease-out;
        -webkit-transform-origin: 90px 90px -90px;
    }
    .face {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: visible;
        -webkit-transform-origin: 0 0;
    }
    .front {
        -webkit-transform: rotateY(0deg);
        z-index: 2;
        background: #d9d9d9;
    }
    .side {
        background: #9dcc78;
        -webkit-transform: rotateY(90deg);
        z-index: 1;
        left: 0px;
    }

JS

var resizer = function () {
        var width = parseInt($(".box-scene").css("width"));
        $(".box").css("-webkit-transform-origin", "center center -" + width / 2 + "px");
    };

    resizer();
    $(window).resize(function () {
        resizer();
    });

Answer 1

以另一种方式旋转面板将修复文本的镜像。

.box-scene:hover .box {
-webkit-transform: rotateY(-90deg);
}