CSS&JS实现卡片旋转至背面再返回正面的技术咨询

Hey there! Let's work through your card flip problem together. First, let's break down what's working in your current code, then fix the flip functionality so you can toggle between front and back while keeping the open state intact.

现有代码的合理性分析 #

Your existing setup has a great foundation:

• The 3D transform basics (perspective, transform-style: preserve-3d) are correctly implemented—this is critical for realistic 3D effects like flipping.
• The open/close toggle logic for expanding the card works as intended.
• Where things got stuck: You tried using z-index and raw rotate without tying them to proper 3D state management. The backface-visibility: visible on .card--front.back was also causing both sides to show at once, leading to visual conflicts.

核心思路实现翻面 #

To get the "flip to back → return to front in open state" effect, we need:

1. A dedicated container for the front/back card sides, so we can rotate the whole container to switch views.
2. backface-visibility: hidden on both sides to hide the face that's not facing the viewer.
3. Separate state management for flipping vs. expanding, so the two actions don't interfere with each other.

修改后的完整代码 #

调整HTML结构 #

We'll restructure the flipable card into a parent container with explicit front/back children for clarity:

<div class="wrap" id="wrap">
  <!-- Expanded inner card content -->
  <div class="card card--inner" style="background-color:white;">
    <h2 style="display:inline;width:90%;height:20%;background-color:#8eb9ff;position:absolute;left:3%;top:4%;margin:0px 5px;"></h2>
    <h2 style="display:inline;width:60%;height:10%;background-color:#8eb9ff;position:absolute;left:20%;top:28%;margin:0px 5px;"></h2>
    <h2 style="display:inline;width:90%;height:37.5%;background-color:#8eb9ff;position:absolute;left:3%;top:41%;margin:0px 5px;"></h2>
    <h2 style="display:inline;width:30%;height:10%;background-color:#8eb9ff;position:absolute;right:3%;top:84%;margin:0px 5px;"></h2>
  </div>

  <!-- Flip container for front/back card -->
  <div class="card-flip-container" onclick="toggleCardFlip()">
    <!-- Card front -->
    <div class="card card--front">
      <h2 style="display:inline;width:90%;height:20%;background-color:#8eb9ff;position:absolute;left:3.5%;top:4%;margin:0px 5px;"></h2>
      <h2 style="display:inline;width:60%;height:10%;background-color:#8eb9ff;position:absolute;left:20.5%;top:28%;margin:0px 5px;"></h2>
      <h2 style="display:inline;width:80%;height:6%;background-color:#8eb9ff;position:absolute;left:9%;top:43%;"></h2>
    </div>
    <!-- Card back -->
    <div class="card card--back">
      <h2 style="display:inline;width:90%;height:46.5%;background-color:#8eb9ff;position:absolute;left:3%;top:51%;margin:0px 5px;"></h2>
      <h2 style="display:inline;width:90%;height:46.5%;background-color:#8eb9ff;position:absolute;left:3%;top:3%;margin:0px 5px;"></h2>
    </div>
  </div>
</div>

<button id="button" onclick="openCard()">Open Card</button>

关键CSS修改 #

Add styles for the flip container and front/back card states:

body {
  margin: 0;
  background-color: grey;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  perspective: 1000px;
  transform-style: preserve-3d;
}

img { max-width: 100%; }

*, *:after, *:before { box-sizing: border-box; }

h2 {
  font-family: "Dancing Script", serif;
  font-weight: normal;
  font-size: 45px;
  color: #009500;
  text-align: center;
}

.wrap {
  width: 125px;
  height: 250px;
  position: relative;
  transform: rotateX(40deg) rotate(15deg);
  transform-style: preserve-3d;
  box-shadow: 15px 10px 5px rgba(0, 0, 0, 0.3);
  transition: all 3s linear;
}

.card {
  height: 100%;
  width: 100%;
  background-color: #fff;
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
  border: 4px solid black;
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Parent container for flipable front/back */
.card-flip-container {
  height: 100%;
  width: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  z-index: 2;
}

/* Flip state: Rotate container 180deg */
.card-flip-container.flipped {
  transform: rotateY(180deg);
}

.card--front {
  transform: rotateY(0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center left;
  transition: all 3.5s cubic-bezier(0.4, 0, 1, 1);
}

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

/* Open state transform for front card */
.card--front.open {
  transform: rotateY(-180deg);
  box-shadow: 15px 10px 5px rgba(0, 0, 0, 0.3);
}

.card--inner {
  overflow: hidden;
  padding: 15px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.card--inner h2 { font-size: 32px; }

.card--inner img {
  max-width: 60%;
  margin-top: 1.5em;
}

.card--inner.open:before {
  transform: translateX(-155%);
  opacity: 0.1;
}

.card--inner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
  opacity: 1;
  transition: all 1s ease-in-out;
}

button {
  -webkit-appearance: none;
  background: #E53935;
  border: 5px solid #9f1815;
  border-width: 0 0 5px;
  padding: 10px 20px;
  width: 150px;
  text-align: center;
  display: block;
  transform: rotateX(30deg);
  margin-top: 20px;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.3);
}

button:active {
  border-bottom-width: 2px;
  margin-top: 23px;
  outline: none;
}

button:focus { outline: none; }

补充JavaScript逻辑 #

Add a flip toggle function and update the open/close logic to reset flip state:

function pers() {
  document.getElementById("wrap").style.transform = "rotateX(0deg) rotate(0deg)";
  document.getElementById("wrap").style.width = "250px";
  document.getElementById("wrap").style.height = "500px";
}

function openCard() {
  const button = document.getElementById('button');
  button.innerHTML = button.innerHTML === 'Open Card' ? 'Close Card' : 'Open Card';
  
  const frontCard = document.querySelector('.card--front');
  frontCard.classList.toggle('open');
  
  // Reset flip state when opening/closing the card
  const flipContainer = document.querySelector('.card-flip-container');
  flipContainer.classList.remove('flipped');
}

// Toggle card flip between front and back
function toggleCardFlip() {
  const flipContainer = document.querySelector('.card-flip-container');
  flipContainer.classList.toggle('flipped');
}

关键说明 #

1. Flip Container: The .card-flip-container acts as the parent for both front and back sides. Adding/removing the flipped class rotates it 180deg, switching which face is visible.
2. Backface Visibility: Both card sides have backface-visibility: hidden, so only the face facing the viewer shows up.
3. State Isolation: The open/close function resets the flip state, keeping the two interactions from conflicting.
4. Z-Index Management: We use z-index to ensure the flipable card sits above the expanded inner content, so interactions work as expected.

Now you can click the card to flip between front and back when it's open, use the button to expand/close, and keep your original zoom/rotate functionality intact!

内容的提问来源于stack exchange，提问作者master Nixe