html - 带有转换的不同 css 背面

Question

我创建了一本这样的 CSS 书:https://fiddle.jshell.net/b1b0642z/ 现在我需要封面的背面是不同的颜色。我试图在封面之后用这个类创建另一个 div:

.front_back{
    transform: rotateY( 180deg );
    backface-visibility: hidden;
    background-color:red;
}

但它在转换过程中给我带来了麻烦(基本上在打开书时它随机显示了红色 div 的一部分)。

实现干净转换的最佳方法是什么？

Answer 1

我已经尝试添加另一个具有与 .front div 相同属性的 div:可以看到 here我基本上完成了您所说的，但添加了一个 z-index 以将图像覆盖在背面上方的一层内。

HTML:

<figure class="front-back"></figure>

CSS:

.front {
     z-index: 1;
}

.front-back {
    animation-name: spincube;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    transform-origin: left;
    width:150px;
    height:200px;
    z-index: 0;
    background-color: #333;
    background-size: cover;
}