CSS变换 - 当旋转超过-180度时，图像消失

时间：2016-09-05 17:20:36

标签： html css 3d rotation css-transforms

首先，对不起这个问题，经过几个小时的努力，我无法解决我出错的地方！

我有三张图片，我试图使用transform：rotateY声明将它们翻转-180度。

我设法让它们旋转，但是一旦它们超过-180度的标记就会消失。

我还希望在图像翻转-180度后显示包含一些文本的底层div，就好像它们位于图像背面一样，如果这是有意义的。

这是代码链接 - http://codepen.io/skoster7/pen/KgwXgB

这是代码

＆＃13;
＆＃13; 
.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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

提前感谢您的帮助！

2 个答案:

答案 0 :(得分：3)

修改后的代码：http://codepen.io/anon/pen/ozgpXa

在这种情况下，您应该旋转边框的容器photo。并且还添加一些值以使位置从顶部和左侧位于同一位置。

答案 1 :(得分：1)

您可以执行以下演示。

<强>建议：

您还应该尝试编写语义HTML，以获得更清晰的代码，可维护性，可访问性，SEO等等。并使你的过渡更快一些，在300ms到500ms之间，不要指望用户等待他们想要翻转的每个图像2秒！

<强> jsFiddle

CODE SNIPPET 

.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>

Live Example

相关问题
最新问题