Преобразования CSS - изображение исчезает при повороте на -180 градусов

Во-первых, извините за вопрос, я просто не могу понять, где я ошибаюсь после многих часов попыток!

У меня есть три изображения, и я пытаюсь перевернуть их на 180 градусов, используя объявление transform:rotateY.

Мне удалось заставить их вращаться, но как только они преодолели отметку -180 градусов, они исчезли.

Я также хочу, чтобы базовые элементы div, содержащие некоторый текст, появлялись после того, как изображение переворачивается на -180 градусов — как если бы они были на обратной стороне изображения, если это имеет смысл.

Вот ссылка на codepen: http://codepen.io/skoster7/pen/KgwXgB

Вот код

.container {
  display: flex;
  perspective: 700px;
}
.photo img {
  transition-style: preserve-3d;
  transition-property: transform;
  transition-duration: 2s;
  width: 300px;
  height: 200px;
  top: 20px;
  margin: 10px;
}
.sideb {
  width: 300px;
  height: 200px;
  background: tomato;
}
sidea:hover {
  transform: rotateY(-180deg);
}
.sidea,
.sideb {
  backface-visibility: hidden;
}
.sideb {
  transform: rotateY(180deg);
}
<div class="container">

  <div class="photo">
    <img class="sidea" src="http://cdn.history.com/sites/2/2015/04/hith- 
            father-christmas-lights-iStock_000029514386Large.jpg">
    <div class="sideb">Christmas
    </div>
  </div>

  <div class="photo">
    <img class="sidea" src="https://upload.wikimedia.org/wikipedia/commons/7/79/HalloweenPumpkin2.jpg">
    <div class="sideb">Halloween
    </div>
  </div>

  <div class="photo">
    <img class="sidea" src="http://motormarks.co.uk/news/wp-content/uploads/2015/04/easter-chicks.jpg">
    <div class="sideb">Easter
    </div>
  </div>

</div>

Заранее благодарю за любую помощь!


html css rotation css-transforms 3d
person skoster7    schedule 05.09.2016    source источник
comment
Вы пытаетесь получить эффект «карточки», когда она вращается и появляется текст/цвета?   -  person Andrew Li    schedule 05.09.2016
comment
Да, точно. Примерно так — jsfiddle.net/M783F/5 — но при наведении вместо клика и по горизонтали вместо вертикального   -  person skoster7    schedule 05.09.2016
comment
1. Вы хотите повернутьX или повернутьY? 2. Что вы хотите, чтобы произошло, когда изображение проходит передний план? Вы хотите, чтобы он появился (в зеркале) или нет?   -  person Dekel    schedule 05.09.2016
comment
Примерно так — codepen.io/anon/pen/ozgpXa, но в идеале с отступом по обе стороны от изображения, поэтому они разнесены   -  person skoster7    schedule 05.09.2016

Ответы (2)


arrow_upward
3
arrow_downward

Измененный код: http://codepen.io/anon/pen/ozgpXa

Вы должны вращать контейнер сторон в этом случае photo. А также добавьте некоторые значения, чтобы получить позицию сверху и слева, чтобы они были в одном и том же месте.

person Piotr Kliks    schedule 05.09.2016
comment
Вот в принципе - спасибо. Знаете ли вы, как сделать так, чтобы изображения выглядели полностью на одном уровне или рядом друг с другом? - person skoster7; 05.09.2016
comment
Я не уверен, что вы хотели бы получить. Не могли бы вы показать пример или описать его по-другому? - person Piotr Kliks; 05.09.2016
comment
В принципе, можно ли добавить интервал между изображениями, чтобы они не были так близко друг к другу? - person skoster7; 05.09.2016
comment
Да, конечно. Просто добавьте маржу в класс .photo (уже изменено codepen) - person Piotr Kliks; 05.09.2016
comment
Codepen выглядит так же для меня, извините! Я имею в виду между каждым отдельным изображением. - person skoster7; 05.09.2016

arrow_upward
1
arrow_downward

Вы можете сделать что-то вроде демонстрации ниже.

Рекомендации:

Вы также должны попытаться написать семантический HTML для более чистого кода, простоты сопровождения, доступности, SEO и многого другого. И сделайте ваши переходы немного быстрее, что-то между 300 мс - 500 мс, не ожидайте, что пользователи будут ждать 2 секунды для каждого изображения, которое они хотят перевернуть!

jsFiddle

ФРАГМЕНТ КОДА:

.flip-card {
  width: 30%;
  display: inline-block;
  vertical-align: top;
  margin: 0 0 1% 0;
  -webkit-perspective: 700px;
  perspective: 700px;
}
.flip-card figure {
  width: 100%;
  height: 0;
  margin: 0;
  padding-top: 100%;
  position: relative;
  transition: transform 300ms ease-out;
  -webkit-perspective: 700;
  perspective: 700;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.flip-card figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-card figure figcaption {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(-180deg);
}
.flip-card:hover figure,
.flip-card.hover figure {
  transform: rotateY(-180deg);
}
.flip-card figure figcaption p {
  font-size: 1em;
  width: 100%;
  padding: 0 2em;
  color: white;
}
.flip-card figcaption {
  background-color: dodgerblue;
}
.flip-card:nth-of-type(odd) figcaption {
  background-color: tomato;
}
<ul class="container">
  <li class="flip-card" ontouchstart="this.classList.toggle('hover');">
    <figure>
      <img src="http://fillmurray.com/200/200" alt="">
      <figcaption>
        <p>Text Example</p>
      </figcaption>
    </figure>
  </li>
  <li class="flip-card" ontouchstart="this.classList.toggle('hover');">
    <figure>
      <img src="http://fillmurray.com/300/300" alt="">
      <figcaption>
        <p>Text Example</p>
      </figcaption>
    </figure>
  </li>
  <li class="flip-card" ontouchstart="this.classList.toggle('hover');">
    <figure>
      <img src="http://fillmurray.com/400/400" alt="">
      <figcaption>
        <p>Text Example</p>
      </figcaption>
    </figure>
  </li>
  <li class="flip-card" ontouchstart="this.classList.toggle('hover');">
    <figure>
      <img src="http://fillmurray.com/500/500" alt="">
      <figcaption>
        <p>Text Example</p>
      </figcaption>
    </figure>
  </li>
  <li class="flip-card" ontouchstart="this.classList.toggle('hover');">
    <figure>
      <img src="http://fillmurray.com/600/600" alt="">
      <figcaption>
        <p>Text Example</p>
      </figcaption>
    </figure>
  </li>
  <li class="flip-card" ontouchstart="this.classList.toggle('hover');">
    <figure>
      <img src="http://fillmurray.com/100/100" alt="">
      <figcaption>
        <p>Text Example</p>
      </figcaption>
    </figure>
  </li>
</ul>

Чтобы добавить больше интервалов между элементами, просто измените свойство margin в классе .flip-card.

РЕДАКТИРОВАТЬ:

Как сделать так, чтобы он переворачивался только тогда, когда кто-то нажимает на него?

Для этого требования мы можем создать небольшой плагин.

Для этого требуется «активный» класс, который перевернет карты в нашем CSS.

.flip-card.active figure {
  transform: rotateY(-180deg);
}

Как использовать в JS:

var flipcards = new FlipCards({
  cardsClass: "flip-card", //default
  activeClass: "active" //default
});


(function(window) {

  "use strict";

  function extend(a, b) {
    for (var key in b) {
      if (b.hasOwnProperty(key)) {
        a[key] = b[key];
      }
    }
    return a;
  }

  function flipCards(options) {
    this.options = extend({}, this.options);
    extend(this.options, options);
    this._init();
  }

  flipCards.prototype.options = {
    cardsClass: "flip-card",
    activeClass: "active"
  }

  flipCards.prototype._initEvents = function() {
    var cards = document.getElementsByClassName(this.options.cardsClass),
      i = 0,
      len = cards.length,
      self = this;
    if (len === 0) return;
    for (i, len; i < len; i++) {
      cards[i].addEventListener('click', function() {
        this.classList.toggle(self.options.activeClass);
      });
    }
  }

  flipCards.prototype._init = function() {
    this._initEvents();
  }
  window.FlipCards = flipCards;

  // Support for CommonJS Module format and AMD format.
  if (typeof module !== "undefined" && module.exports) {
    module.exports.FlipCards = flipcards;
  } else if ((typeof define !== "undefined" && define !== null) && (define.amd !== null)) {
    define("flipcards.js", function() {
      return flipcards;
    });
  }

})(window);

var flipcards = new FlipCards({
  cardsClass: "flip-card", //default
  activeClass: "active" //default
});
.flip-card {
  width: 30%;
  display: inline-block;
  vertical-align: top;
  margin: 0 0 1% 0;
  -webkit-perspective: 700px;
  perspective: 700px;
}

.flip-card figure {
  width: 100%;
  height: 0;
  margin: 0;
  padding-top: 100%;
  position: relative;
  transition: transform 300ms ease-out;
  -webkit-perspective: 700;
  perspective: 700;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.flip-card figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card figure figcaption {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(-180deg);
}

.flip-card.active figure {
  transform: rotateY(-180deg);
}

.flip-card figure figcaption p {
  font-size: 1em;
  width: 100%;
  padding: 0 2em;
  color: white;
}

.flip-card figcaption {
  background-color: dodgerblue;
}

.flip-card:nth-of-type(odd) figcaption {
  background-color: tomato;
}
<ul class="container">
  <li class="flip-card" ontouchstart="this.classList.toggle('hover');">
    <figure>
      <img src="http://fillmurray.com/200/200" alt="">
      <figcaption>
        <p>Text Example</p>
      </figcaption>
    </figure>
  </li>
  <li class="flip-card" ontouchstart="this.classList.toggle('hover');">
    <figure>
      <img src="http://fillmurray.com/300/300" alt="">
      <figcaption>
        <p>Text Example</p>
      </figcaption>
    </figure>
  </li>
  <li class="flip-card" ontouchstart="this.classList.toggle('hover');">
    <figure>
      <img src="http://fillmurray.com/400/400" alt="">
      <figcaption>
        <p>Text Example</p>
      </figcaption>
    </figure>
  </li>
  <li class="flip-card" ontouchstart="this.classList.toggle('hover');">
    <figure>
      <img src="http://fillmurray.com/500/500" alt="">
      <figcaption>
        <p>Text Example</p>
      </figcaption>
    </figure>
  </li>
  <li class="flip-card" ontouchstart="this.classList.toggle('hover');">
    <figure>
      <img src="http://fillmurray.com/600/600" alt="">
      <figcaption>
        <p>Text Example</p>
      </figcaption>
    </figure>
  </li>
  <li class="flip-card" ontouchstart="this.classList.toggle('hover');">
    <figure>
      <img src="http://fillmurray.com/100/100" alt="">
      <figcaption>
        <p>Text Example</p>
      </figcaption>
    </figure>
  </li>
</ul>

Живой пример

person Ricky    schedule 05.09.2016
comment
Как заставить его переворачиваться только тогда, когда кто-то нажимает на него. - person Shalin Patel; 05.04.2017
comment
@ShalinPatel Я обновил ответ небольшим плагином, который вы можете использовать. Если у вас есть какие-либо сомнения, не стесняйтесь спрашивать. - person Ricky; 05.04.2017