如何在css中镜像一张卡片或一个单词

kxe2p93d 于 2022-12-15 发布在其他

关注(0)|答案(1)|浏览(111)

我需要这个CSS的帮助，当我悬停看到电影的细节，它翻转，但整个词在它也翻转。有没有一种方法，我可以让这个词翻转第一次，然后当我悬停的话变成正常？
这是HTML代码，它是用JS文件和CSS代码写的.

body {
  background-color: var(--primary-color);
  font-family: 'Poppins', sans-serif;
  margin: 0;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.overview {
  background-color: white;
  padding: 2rem;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  max-height: 100%;
  transform: translateY(101%);
}

.movie:hover .overview {
  transform: rotateY(180deg);
  transition: transform 0.3s ease-in;
  overflow-y: auto;
}

<img href = "#" src =https://i.pinimg.com/originals/a4/7b/a5/a47ba59b4a353e0928ef0551ca44f980.jpg>
<div class="movie-info">
    <h3>Title</h3>
</div>
<div class="overview">
    <h3>Overview</h3>
        lorem ipsuim
    <br/>
</div>

css

来源：https://stackoverflow.com/questions/74763940/how-do-i-mirror-a-card-or-the-word-in-css

1条答案

按热度按时间

zf9nrax11#

.card {
  position: reletive;
  height: 400px;
  width: 250px;
  font-size: 32px;
  text-align: center;
}

.card__side--back {
  height: 400px;
  width: 250px;
/*   background-color: orange; */
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  background-color: orange;
  transform: rotateY(180deg);
}

.card__side--front {
  height: 400px;
  width: 250px;
/*   background-color: orange; */
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  background-color: teal;
}

.card:hover .card__side--front {
  transform: rotateY(-180deg);
}

.card:hover .card__side--back {
  transform: rotateY(0);
}

<div class="card"> 
  <div class="card__side"> 
  <div class="card__side--front">This is the front </div>
    <div class="card__side--back"> This is the back</div>
</div>
</div>

据我所知，这就是你想要实现的。这里的关键是背面可见性和悬停在包含两张卡的容器上，因为当隐藏时，它不能悬停。

赞(0）回复(0）举报 2022-12-15

我来回答

如何在css中镜像一张卡片或一个单词

1条答案

相关问题

热门标签

最新问答