我已經成功地在React中建立了一個有正面和背面的卡片，并用CSS成功地翻轉了它。但是，我想在點擊/觸摸時翻轉它。

我嘗試將transform屬性設置為一個類，并在click上切換該類，但沒有成功。

你將如何實現這一點？

這是我目前通過懸停翻轉它的方式:

.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);
}

問題是，當一個類用。切換方法。

解決方案是在類列表之外創建一個狀態，并通過使用setState方法從類列表中添加類。這會觸發重新渲染

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

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

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

您可以使用js向元素添加樣式。

你忘了添加的非常簡單，你忘了轉換:類和視角上的轉換1:1000像素。越少效果越強烈。

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");
}

我仍在學習javascript，但這是我想到的...

我用javascript做了一個片段，你可以點擊& quot卡片& quot當你& quot鼠標移出& quot它從后向前旋轉，或者如果你注釋掉第二張卡片，你可以點擊另一張卡片，它從后向前旋轉，你點擊的卡片旋轉到后面。

我開了一個名為& quot。card _ _ inner . is-flipped & quot；。用& quot卡片& quotjavascript中聲明的變量，它面向所有的& quot。卡_ _內& quot我添加并刪除了& quot。被翻轉& quot關于& quot單擊& quot和& quot鼠標離開& quot每張卡。

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>