时间戳

首页 > 解决方案 > 我的卡只显示背面。为什么这样？

html - 我的卡只显示背面。为什么这样？

问题描述

我正在创建一个翻牌记忆游戏，但正面没有显示。为什么会这样以及如何让它可见？我试过overflow: visible了，但似乎没有效果。

HTML

<div class="soprano-card">
            <img class="front-card" src="assets/img/Characters/Tony-Soprano.jpg" alt="Characters">
            <img class="back-card" src="assets/img/Sopranos-Title.jpg" alt="Sopranos-Title">
  </div>

CSS

.soprano-card {
  width: 200px;
  height: 150px;
  top: 100px;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
  border: 5px solid yellow;
  overflow: auto;
}

.front-card,
.back-card {
  position: absolute;
  width: 100%;
  height: 100%;
}```

If anyone can help explain to me what I've got to do to get the front-card visible when flipped it and why at the moment it isn't would be greatly appreciated.

标签： htmlcss

解决方案

可以通过创建div包含内部的父级来创建翻转卡div。div在这个名为Flip_Card_Inner_Container. Back_Face需要绕 y 轴变换 180˚ 。住宿将backface-visibility阻止图像显示到卡片的另一面。

.Flip_Card {
  background-color: transparent;
  width: 100px;
  height: 100px;
  perspective: 1000px;
}

.Flip_Card_Inner_Container {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  transform-style: preserve-3d;
  border: 10px solid black;
}

.Flip_Card:hover>.Flip_Card_Inner_Container {
  transform: rotateY(180deg);
}

.Front_Face,
.Back_Face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.Front_Face {
  background-color: red;
}

.Back_Face {
  background-color: blue;
  transform: rotateY(180deg);
}

img {
  height: 100%;
  width: 100%;
}
<div class="Flip_Card">
  <div class="Flip_Card_Inner_Container">

    <div class="Front_Face">
      <img src="https://picsum.photos/200">
    </div>
    <div class="Back_Face">
      <img src="https://picsum.photos/200/300">
    </div>

  </div>
</div>

推荐阅读