# CSS3如何實現翻轉2次效果
CSS3的3D變換功能為網頁元素提供了豐富的動態效果，其中`rotateY()`和`rotateX()`等旋轉函數配合過渡（`transition`）或動畫（`animation`）可以實現復雜的翻轉效果。本文將詳細介紹如何通過CSS3實現元素連續翻轉2次的動畫效果。
## 一、基礎概念
### 1.1 CSS3 3D變換核心屬性
- `transform-style: preserve-3d`：保持子元素的3D空間
- `perspective`：設置觀察者與z=0平面的距離
- `backface-visibility`：控制元素背面是否可見
- `rotateX()/rotateY()`：繞X/Y軸旋轉函數
### 1.2 關鍵實現原理
通過關鍵幀動畫定義0%、50%、100%三個關鍵節點，分別設置不同的旋轉角度：
- 第一次翻轉：0° → 180°
- 第二次翻轉：180° → 360°
## 二、完整實現代碼
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.flip-container {
width: 200px;
height: 200px;
perspective: 1000px;
margin: 100px auto;
}
.flip-box {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: doubleFlip 3s ease-in-out infinite;
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
}
.front {
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
}
.back {
background: linear-gradient(45deg, #a18cd1, #fbc2eb);
transform: rotateY(180deg);
}
@keyframes doubleFlip {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="flip-container">
<div class="flip-box">
<div class="front">正面</div>
<div class="back">背面</div>
</div>
</div>
</body>
</html>
perspective: 1000px 創建3D空間backface-visibility: hidden 隱藏元素背面@keyframes doubleFlip {
0% { transform: rotateY(0deg); } /* 初始狀態 */
50% { transform: rotateY(180deg); } /* 第一次翻轉完成 */
100% { transform: rotateY(360deg); } /* 第二次翻轉完成 */
}
修改關鍵幀增加縮放：
@keyframes doubleFlip {
0% { transform: rotateY(0deg) scale(1); }
25% { transform: rotateY(90deg) scale(0.9); }
50% { transform: rotateY(180deg) scale(1); }
75% { transform: rotateY(270deg) scale(0.9); }
100% { transform: rotateY(360deg) scale(1); }
}
@keyframes doubleFlip {
0% {
transform: rotateY(0deg);
opacity: 1;
}
49% { opacity: 0.2; } /* 翻轉中途淡出 */
50% {
transform: rotateY(180deg);
opacity: 1;
}
99% { opacity: 0.2; }
100% {
transform: rotateY(360deg);
opacity: 1;
}
}
通過合理組合CSS3的3D變換和動畫屬性，可以創造出各種吸引人的翻轉效果。本文介紹的二次翻轉技術可以進一步擴展為多次翻轉或組合其他變換效果，為網頁增添動態視覺體驗。 “`
該文章包含： 1. 基礎概念說明 2. 完整可運行的代碼示例 3. 分步驟實現解析 4. 效果增強技巧 5. 實際應用場景 6. 注意事項提醒
總字數約1000字，采用Markdown格式，包含代碼塊、標題層級和列表等標準元素。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
