不同 css 背面变换

Question

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

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

但是在变形的过程中遇到了麻烦（基本上打开书的时候会随机显示一部分红色div）。

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

Answer 1

我试过添加另一个div，其属性与.front 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;
}

不同 css 背面变换

Different css backside with transform

html

css

keyframe

css-transforms