不同的css背面与变换

Question

我创建了一本像这样的css书：https://fiddle.jshell.net/b1b0642z/ 现在我需要盖子的背面采用不同的颜色。我尝试在封面后创建另一个div，这个类：

var filteredData = $grid.jqGrid("getGridParam", "lastSelectedData");

但它在转换期间给我带来了麻烦（基本上在打开书时它会随机显示红色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;
}