Нужно добавить переднее и заднее изображения для перелистывания div

Итак, я некоторое время боролся с этим набором кода, и я так близок к его завершению.

Первая проблема заключалась в том, чтобы заставить мои изображения реагировать на высоту и ширину, но после некоторых обсуждений я смог выяснить, как сделать их отзывчивыми, упростив код и используя цвета в качестве заполнителей, но теперь я не могу понять, как повторно добавить фоновые изображения.

Вот кодовая ручка OG, http://codepen.io/anon/pen/YypXjw.

и вот оно сейчас, http://codepen.io/anon/pen/rOWXzW

* { color: #fff; }

.flip-container {
width: 33.333%;
padding-bottom: 33.333%;
float: left;
}

.flip-container:hover .flipper {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}

.front {
position: absolute;
width: 100%;
padding-bottom: 100%;
}

.front-a {
background: red;
}

.front-b {
background: blue;
}

.front-c {
background: green;
}

Я понятия не имею, почему я не могу заставить HTML отображаться.

Итак, код был очищен, и теперь все, что мне нужно выяснить, это как добавить переднее и заднее изображение к листающемуся div.

Я попытался добавить передние и задние элементы div, такие как код og, но все еще не могу заставить его работать.

Любая помощь или предложения приветствуются.


html css flip responsive-images
person Mario Espinoza    schedule 06.10.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Codepen

Вам нужны передний и задний классы div. Вы можете ориентироваться на переднюю/заднюю часть каждого, используя псевдоселекторы.

<div class="flip-container">
  <div class="flipper">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>

Обложка размера фона, а затем изображение каждой лицевой/задней части.

.front, .back {
  background-size: cover;
}

.flip-container:nth-of-type(1) .front {
  background-image: url(image.jpg);
}

.flip-container:nth-of-type(1) .back {
  background-image: url(image.jpg);
}
person Alejalapeno    schedule 06.10.2015
comment
Это работает отлично! Большое спасибо. Вы не представляете, как это ценится. - person Mario Espinoza; 06.10.2015
comment
@MarioEspinoza Я обновил код и свой ответ. Классы a,b,c были довольно небрежными, поэтому я удалил их и использовал псевдоселекторы nth-of-type(x). - person Alejalapeno; 06.10.2015
comment
@alejapeno Я попытался использовать вашу новую версию кода, и она больше не работает .... к сожалению для меня, я скопировал ее поверх вашей старой версии, и теперь она вообще не отображается :/ - person Mario Espinoza; 05.11.2015