卡片翻转动画

Question

我正在做一个项目，它需要一个卡片翻转动画。我已经做到了，但是当我尝试将更多卡片添加到 HTML 时，我被绊倒了，第二张卡片不会像第一张卡片那样在点击时翻转。我不明白为什么要这样做。我认为它是 javascsript 代码的一部分。

这是代码笔： https://codepen.io/chellios-byte/pen/ZEeNvOM

const card = document.querySelector('.card__inner');

card.addEventListener('click', function () {
    card.classList.toggle('is-flipped');
});

Answer 1

在 document.querySelector 中，您只选择了第一个找到的元素。如果不止一个，则需要 querySelectorAll 其中 returns 一个元素数组。

const cards = document.querySelectorAll('.card__inner');


cards.forEach(card => {
  card.addEventListener('click', function() {
    card.classList.toggle('is-flipped');
  });
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  width: 100%;
  min-height: 100vh;
}

.card__container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5rem;
}

.card {
  margin: 10rem auto 0;
  width: 20rem;
  height: 32rem;
}

.card__inner {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
  backface-visibility: hidden;
}

.card__inner.is-flipped {
  transform: rotateY(180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0px 3px 18px 3px rgb(0, 0, 0, 0.2);
}

.card__face h2 {
  text-align: center;
  padding: 1rem 0;
  font-size: 1.8rem;
  letter-spacing: 0.1rem;
  font-weight: 500;
}

.card__face p {
  font-size: 1.11rem;
  padding: 0.3rem 1rem;
  letter-spacing: 0.012rem;
  font-weight: 300;
}

.card__face--front {
  background-image: url("/img/mountain-view.webp");
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
}

.card__face--front-text {
  height: 100%;
  margin-top: 16rem;
  background: rgba(228, 228, 228, 0.699);
}

.card__face--back {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  border-radius: 10px;
}

.card__content {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.card__content a {
  text-decoration: none;
  text-transform: uppercase;
  color: rgb(0, 0, 0);
  font-size: 1.3rem;
}

.card__content a:hover {
  color: rgba(hsl(0, 0%, 97%), green, blue, alpha);
}

.card__header {
  width: 100%;
}

.card__header>h2 {
  text-align: center;
  padding: 1rem 0;
  font-size: 2rem;
  letter-spacing: 0.1rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Card Flip</title>
</head>

<body>
  <div class="card__container">
    <div class="card">
      <div class="card__inner">
        <div class="card__face card__face--front">
          <div class="card__face--front-text">
            <h2>Mountain view</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis facere blanditiis vitae dolorum architecto laboriosam quas numquam debitis, eaque, ducimus perspiciatis praesentium earum molestias in ab commodi, mollitia voluptate id.
            </p>
          </div>
        </div>
        <div class="card__face card__face--back">
          <div class="card__content">
            <div class="card__header">
              <h2>Himalaya</h2>
            </div>
            <div class="card__body">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. At, vel, quas ducimus consequuntur quaerat numquam optio molestiae ad libero eos perferendis minima eveniet eius consequatur dolorum aperiam iusto incidunt quod quibusdam! Adipisci est sequi aut
              eius possimus expedita laboriosam consequuntur, quo beatae necessitatibus delectus quisquam ipsam! Libero, vero porro aspernatur quibusdam adipisci esse perferendis tenetur voluptatibus quas, sed expedita. Assumenda fugiat officia consequatur.
              Perspiciatis, ex doloribus aliquid magnam inventore quia sit debitis hic totam impedit fugiat ipsam suscipit est recusandae?
            </div>
            <a href="#">View more</a>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card__inner">
        <div class="card__face card__face--front">
          <div class="card__face--front-text">
            <h2>Mountain view</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis facere blanditiis vitae dolorum architecto laboriosam quas numquam debitis, eaque, ducimus perspiciatis praesentium earum molestias in ab commodi, mollitia voluptate id.
            </p>
          </div>
        </div>
        <div class="card__face card__face--back">
          <div class="card__content">
            <div class="card__header">
              <h2>Himalaya</h2>
            </div>
            <div class="card__body">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. At, vel, quas ducimus consequuntur quaerat numquam optio molestiae ad libero eos perferendis minima eveniet eius consequatur dolorum aperiam iusto incidunt quod quibusdam! Adipisci est sequi aut
              eius possimus expedita laboriosam consequuntur, quo beatae necessitatibus delectus quisquam ipsam! Libero, vero porro aspernatur quibusdam adipisci esse perferendis tenetur voluptatibus quas, sed expedita. Assumenda fugiat officia consequatur.
              Perspiciatis, ex doloribus aliquid magnam inventore quia sit debitis hic totam impedit fugiat ipsam suscipit est recusandae?
            </div>
            <a href="#">View more</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>

</html>

卡片翻转动画

Card Flip animation

html

javascript

css

animation