CSS3的3D動畫效果可以讓我們在網頁設計的時候實現更復雜的動畫效果。其中一種比較常見的3D動畫效果就是翻轉動畫。翻轉動畫可以實現頁面上的一些有趣的翻轉效果，比如卡片翻轉、圖片翻轉等等。

/* 定義一個翻轉容器 */
.flip-container {
perspective: 1000px; /* 定義視距距離 */
}
/* 定義翻轉卡片 */
.flipper {
transition: 0.6s; /* 定義翻轉持續時間 */
transform-style: preserve-3d; /* 定義使用 3D 場景 */
position: relative;
}
/* 定義翻轉持續時間 */
.front, .back {
backface-visibility: hidden; /* 翻面不可見 */
position: absolute;
top: 0;
left: 0;
}
/* 定義正面樣式 */
.front {
z-index: 2; /* 使正面處于卡片頂層 */
}
/* 定義背面樣式 */
.back {
transform: rotateY(180deg); /* 背面逆時針旋轉180度 */
}
/* 定義翻轉狀態 */
.flipper.flipped {
transform: rotateY(180deg); /* 翻轉狀態時，逆時針旋轉180度 */
}

以上就是一個基本的CSS3翻轉動畫的實現代碼，可以實現一個簡單的卡片翻轉動畫效果。