html - CSS转换-旋转超过-180度时图像消失

首先，对这个问题感到抱歉，经过数小时的尝试，我无法弄清哪里出了问题！

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

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

我还希望包含div的底层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>

在此先感谢您的帮助！

最佳答案

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

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

关于html - CSS转换-旋转超过-180度时图像消失，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39335205/