如何使用 -webkit-transform: rotateX(); 使隐藏的面孔从顶部出现

Question

我正在尝试使用 css transform 来实现此 3D 转换效果：

在我的尝试中，隐藏的面孔从右侧出现，而它需要在鼠标悬停时从底部出现，我不知道我做错了什么，任何关于如何解决这个问题的帮助将不胜感激，提前感谢您的反馈。

HTML

<div class='box-scene'>
    <div class='box'>
        <div class='front face'>
            <img src='http://placehold.it/180x180/' alt=''>
        </div>
        <div class="side face">
            <p>This is back</p>
        </div>
    </div>
</div>
<div class='box-scene'>
    <div class='box'>
        <div class='front face'>
            <img src='http://placehold.it/180x180/' alt=''>
        </div>
        <div class="side face">
            <p>This is back</p>
        </div>
    </div>
</div>

CSS

.box-scene {
    -webkit-perspective: 700;
    width: 400px;
    height: 200px;
    margin: auto;

    z-index: 999;
}
.box-scene:hover .box {
    -webkit-transform: rotateX(-90deg);
}
.box {
    width: 180px;
    height: 180px;
    position: relative;

    -webkit-transform-style: preserve-3d;

    -webkit-transition: all 0.4s ease-out;
    -webkit-transform-origin: 90px -90px -90px;

    /* float: left; */
    margin: 30px auto;


}

.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: 180px;
}

Answer 1

如果隐藏面来自底部，你必须改变它的位置和一些初始旋转。这是新的 fiddle.
If you want it to come from the side the only thing to change is replacing rotateX(-90deg) with rotateY(-90deg) for the .box-scene:hover .box part. See fiddle.

如何使用 -webkit-transform: rotateX(); 使隐藏的面孔从顶部出现

How to make a hidden face appear from the top using -webkit-transform: rotateX();

html

css

css-animations