Другая задняя сторона css с преобразованием

Я создал книгу css, подобную этой: https://fiddle.jshell.net/b1b0642z/ Теперь мне нужно, чтобы обратная сторона обложки была другого цвета. Я попытался создать еще один div сразу после обложки с помощью этого класса:

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

но это доставляет мне проблемы во время преобразования (в основном при открытии книги он случайным образом показывает часть красного div).

Каков наилучший метод для достижения чистой трансформации?


html css css-transforms keyframe
person Dani    schedule 14.03.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я попытался добавить еще один div с теми же свойствами, что и div .front: можно увидеть здесь Я в основном сделал то, что вы сказали, но добавил z-индекс, чтобы поместить обложку изображения на слой выше задней части внутри одного.

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;
}
person Alfie B    schedule 14.03.2016
comment
О, это была недостающая часть! Благодарю вас! - person Dani; 14.03.2016
comment
@Дани, нет проблем, рад помочь :) - person Alfie B; 14.03.2016