Как скрыть div, содержащий текст, за изображением в 3D-преобразовании

Question

Я пытаюсь сделать три изображения с эффектом «флипкарта» около полутора дней и думаю, что довольно близок к решению.

Однако, как вы можете видеть из кода, осталась единственная проблема в том, что когда мои изображения находятся в статическом состоянии (т. Е. Не наведены), вы все еще можете видеть текст, лежащий поверх них.

Я был бы очень признателен, если бы кто-нибудь мог придумать способ, чтобы, когда изображения статичны, поверх них не лежал текст, но когда они наведены, они анимируются с эффектом `` флипкарты '' - например, уже имеет место.

В принципе, я бы просто хотел, чтобы текст был скрыт / удален, когда изображения находятся в статическом состоянии, но видимы после анимации - как если бы они были на «обратной стороне» изображений! В остальном все нормально.

Заранее цените любые ответы, спасибо, ребята! :-)

Ссылка Codepen - http://codepen.io/skoster7/pen/kkYEJk?editors=0100 < / а>

HTML:

<div class="flexcontainer">
    <div class="photo-container">
        <div class="photo">
            <img src="https://media2.giphy.com/media/kiXLfqncf42kg/200_s.gif" class="front" />
            <div class="photo-desc back">Christmas tree</div>
        </div>
    </div>

    <div class="photo-container">
        <div class="photo">
            <img src="http://hdwallpaperpoint.com/wp-content/uploads/2016/05/Happy-birthday-candles-on-cake-small-cake-hd-4k-wallpaper-300x200.jpg" class="front" />
            <div class="photo-desc back">Happy Birthday</div>
        </div>
    </div>

    <div class="photo-container">
        <div class="photo">
            <img src="https://www.walldevil.com/wallpapers/a76/thumb/halloween-jack-o039-lantern-pumpkin-ghost-cat-skull-spider.jpg" class="front" />
            <div class="photo-desc back">Halloween</div>
        </div>
    </div>
</div>

CSS:

.flexcontainer {
    display: flex;
    perspective: 700px;
}

.photo {
    position: relative;
    z-index: 1000;
}

.photo-desc {
    position: relative;
    z-index: 100;
}

.photo-container {
    position: relative;
    margin-right: 10px;
    transition-property: transform;
    transition-duration: 2s;
    transition-style: preserve-3d;
    backface-visibility: hidden;
}

    .photo-container:hover {
        transform: rotateY(-180deg);
    }

.back {
    backface-visibility: visible;
    position: absolute;
    top: 10;
    margin-top: -200px;
    transform: rotateY(-180deg);
    color: red;
}

html css css-transitions

1

skoster7 6 Сен 2016 в 20:37

Answer 1

Элементы photo и back должны быть одноуровневыми (а не родительскими / дочерними).

Вот фрагмент (измененная ширина / высота элементов, чтобы соответствовать SO):

.flexcontainer {
  display: flex; 
  perspective: 700px; 
}

.photo {
  width: 200px;
  height: 150px; 
  transform: rotateY(0deg); 
}
.photo img {
  width: 200px;
  height: 150px;
}

.photo-container {
  transform-style: preserve-3d;
  transition-property: transform;
  transition-duration: 2s; 
  position:relative;
  width: 200px;
  height: 150px; 
  margin:10px;
}

.photo-container:hover {
  transform: rotateY(-180deg); 
}

.back {
  transform: rotateY(180deg); 
  color: red;
}
.photo,
.back {
  backface-visibility: hidden; 
  position:absolute;
  left:0;
  top:0;
}
.back {
  transform: rotateY(180deg); 
}

<div class="flexcontainer">

  <div class="photo-container">
    <div class="photo">
      <img src="https://media2.giphy.com/media/kiXLfqncf42kg/200_s.gif" class="front">
    </div>
    <div class="back">Christmas tree</div>
  </div>

  <div class="photo-container">
    <div class="photo">
      <img src="http://hdwallpaperpoint.com/wp-content/uploads/2016/05/Happy-birthday-candles-on-cake-small-cake-hd-4k-wallpaper-300x200.jpg" class="front">
    </div>
    <div class="back">Happy Birthday</div>
  </div>

  <div class="photo-container">
    <div class="photo">
      <img src="https://www.walldevil.com/wallpapers/a76/thumb/halloween-jack-o039-lantern-pumpkin-ghost-cat-skull-spider.jpg" class="front">
    </div>
    <div class="back">Halloween</div>
  </div>
</div>

И рабочий код:
http://codepen.io/anon/pen/Egazvq?editors=1100

1

Dekel 6 Сен 2016 в 18:15

Answer 2

Что ж, мне понравилось это испытание. Я продолжу и добавлю для вас другое решение.

.flexcontainer {
  display: flex; 
  perspective: 700px; 
}

.photo-desc { 
  position: absolute; 
}

.photo-container {  
  position: relative; 
  z-index: 100;  
  margin-right: 10px; 
  transition-property: transform;
  transition-duration: 2s; 
  transition-style: preserve-3d; 
}

.photo-container:hover {
  transform: rotateY(-180deg);
  backface-visibility: visible;
}

.back {
  position: absolute;
  top: 10; 
  margin-top: -200px; 
  transform: rotateY(180deg);
  color: red; 
  opacity: 0;
}
.photo-container:hover > .back {
  opacity: 1;
  transition: opacity 1s linear;
}

<div class="flexcontainer">

  <div class="photo-container">
    <img src="https://media2.giphy.com/media/kiXLfqncf42kg/200_s.gif" class="front">
    <div class="back">
      Christmas tree
    </div>
  </div>
  
   <div class="photo-container">
     <img src="http://hdwallpaperpoint.com/wp-content/uploads/2016/05/Happy-birthday-candles-on-cake-small-cake-hd-4k-wallpaper-300x200.jpg" class="front">
    <div class="back">
      Happy Birthday
       </div>
       </div>
  
  <div class="photo-container">
    <img src="https://www.walldevil.com/wallpapers/a76/thumb/halloween-jack-o039-lantern-pumpkin-ghost-cat-skull-spider.jpg" class="front">
    <div class="photo-desc back">Halloween
    </div>
  </div>
  
  

</div>

Это позволяет тексту «исчезать» и т. Д. Что, на мой взгляд, выглядит круто с вашей анимацией. Я также получил это так, чтобы ваши изображения оставались "появляющимися" при наведении курсора, а не "исчезновением" обратной стороны при переворачивании анимации.

В качестве примечания: разочарован тем, что другие сначала нашли другое решение :)

1

Ricky 6 Сен 2016 в 19:31

Answer 3

Вы можете добиться этого, добавив display: none; в класс .back

А затем добавим кое-что в свой css:

.photo-container:hover .back {
  display: block;
}

Вот обновленный код в качестве примера:

http://codepen.io/anon/pen/QKwRvA?editors=1100

1

ryantpayton 6 Сен 2016 в 18:07

Как скрыть div, содержащий текст, за изображением в 3D-преобразовании

3 ответа

Похожие вопросы

Новые вопросы

html