翻转卡片，Web 应用程序的 CSS 动画

Question

我已经设法在 React 中构建了一张正面和背面的卡片，并让它在悬停时通过 CSS 成功翻转。但是，我想在点击/触摸时翻转它。

我尝试将转换属性设置为一个类并在点击时切换该类，但没有成功。

你会如何做到这一点？

这就是我目前通过悬停翻转它的方式：

.card {
  position: relative;
  perspective: 800px;
  transition: transform 1s ease;
  perspective: 1000px;
} 
 
.card > * {
  width: 10rem;
  transition: transform 1s ease;
  backface-visibility: hidden;
}

.card:hover > .card__front {
transform: rotateY(180deg);
}

.card:hover > .card__back {
transform: rotateY(0);
}

还有我的 JSX

        <div className={styles.card} >
          {/* FRONTSIDE */}
            <div className={styles.card__front}>
              //FRONTSIDE CONTENT
            </div>

            {/* BACKSIDE */}
            <div className={styles.card__back}>
               //BACKSIDE CONTENT
            </div>
        </div>

更新

此功能有效，它在我想要的元素上打开和关闭翻转类。但是，一旦添加了类，就不会发生动画。 .flip 类的作用与 :hover 完全相同。

 //function to toggle class
 const flip = (element) => {
    console.log(element);
    element.classList.toggle("flip");
  };

//the css class
.flip {
  transform: rotateY(180deg);
}

  

Answer 1

你可以使用js给元素添加样式。

您忘记添加的内容非常简单，您忘记了转换：在类和透视图上转换 1：1000px。越少效果越强烈。

HTML:-

<link href="style.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
<div class="card-warpper">
  <span onclick="flipCard()" class="card">
    <div class="front">
      Aye
    </div>
    <div class="back">
      Bye
    </div>
  </span>
</div>

CSS：-（您将根据需要对其进行编辑）

body {
  background: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.card-warpper {
  width: 50%;
  height: 30%;
  perspective: 1000px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.card-clicked {
  transform: rotateY(180deg);
}

.front {
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  color: black;
  font-size: 2rem;
}
.back {
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  color: antiquewhite;
  font-size: 2rem;
  transform: rotateY(180deg);
}

最后，JS：-

function flipCard() {
  let card = document.getElementsByClassName("card")[0];
  card.classList.toggle("card-clicked");
}

如果这个答案对你有帮助，请不要犹豫，点击它旁边的复选标记接受答案。

Answer 2

问题是当使用 .toggle 方法添加类时，React 不会重新渲染 DOM。

解决方案是从类列表中创建一个状态，并使用 setState 方法从类列表中添加类。这会触发重新渲染

//JS
const [classlist, setClasslist] = useState(styles.card)

const flip = () => {
setClasslist(classlist + styles.flip)
}

//HTML
<div className={classlist} onClick={() => flip()}>

Answer 3

我还在学习 javascript，但这就是我想出的......

我使用javascript制作了一个sn-p，您可以单击“卡片”并将其移到后面，当您“鼠标移出”时，它会旋转回前面，或者如果您注释掉第二张card.forEach，您可以单击另一张卡片，它会向后旋转，而您单击的卡片会向后旋转。

我创建了一个名为“.card__inner.is-flipped”的类。在针对所有“.card__inner”的javascript中声明的“cards”变量中，我在每张卡片的“click”和“mouseleave”上添加并删除了“.is-flipped”类。

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

cards.forEach(el => {
    el.addEventListener('click', function() {
        cards.forEach(el => el.classList.remove('is-flipped'));
        el.classList.add('is-flipped');
    });
});

cards.forEach(el => {
    el.addEventListener('mouseleave', function() {
        cards.forEach(el => el.classList.remove('is-flipped'));
    });
});

.cardRowWrapper { //RowWrapper  CARD
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    width: 45rem;
    height: 35rem;
    perspective: 800px;
    z-index: 100;
}

.card__inner { //Skills circle
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 12rem;
    width: 12rem;
    border-radius: 50%;
    background: green;
    transition: transform 1s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
          -o-transform-style: preserve-3d;
    position: relative;
}

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

.card__face {
    position: absolute;
    backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
          -ms-backface-visibility: hidden;
            -o-backface-visibility: hidden;
    overflow: hidden;
}

.card__face--front {
    display: flex;
    backface-visibility: hidden;
    align-items: center;
    justify-content: center;
}

.card__face--back {
    display: block;
    transform: rotateY(180deg);
}

            <div class="cardRowWrapper">
                    <div class="card__inner">
                        <div class="card__face card__face--front">
                          <p>This is the front</p>
                        </div>
                        <div class="card__face card__face--back">
                            <span class="skillsSubHeading">This is the back</span>
                        </div>
                    </div>

                    <div class="card__inner">
                        <div class="card__face card__face--front">
                          <p>This is the front</p>
                        </div>
                        <div class="card__face card__face--back">
                            <span class="skillsSubHeading">This is the back</span>
                        </div>
                    </div>

                    <div class="card__inner">
                        <div class="card__face card__face--front">
                          <p>This is the front</p>
                        </div>
                        <div class="card__face card__face--back">
                            <span class="skillsSubHeading">This is the back</span>
                        </div>
                    </div>

                    <div class="card__inner">
                        <div class="card__face card__face--front">
                          <p>This is the front</p>
                        </div>
                        <div class="card__face card__face--back">
                            <span class="skillsSubHeading">This is the back</span>
                        </div>
                    </div>

                    <div class="card__inner">
                        <div class="card__face card__face--front">
                          <p>This is the front</p>
                        </div>
                        <div class="card__face card__face--back">
                            <span class="skillsSubHeading">This is the back</span>
                        </div>
                    </div>

                    <div class="card__inner">
                        <div class="card__face card__face--front">
                          <p>This is the front</p>
                        </div>
                        <div class="card__face card__face--back">
                            <span class="skillsSubHeading">This is the back</span>
                        </div>
                    </div>
                </div>