CSS3中的翻卡片效果，是通過使用transform屬性和transition屬性實現的。具體的實現步驟如下：

/* 第一步：定義翻轉的基本樣式 */
.card {
width: 200px;
height: 200px;
position: relative;
perspective: 800px;
/* 設置視角，也就是觀察者距離翻轉元素的距離 */
}
.card .front,
.card .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
/* 隱藏背面 */
}
.card .front {
background-color: #fff;
}
.card .back {
background-color: #f00;
transform: rotateY(180deg);
/* 翻轉180度，顯示背面 */
}
/* 第二步：添加翻轉動畫 */
.card:hover .front {
transform: rotateY(180deg);
/* 翻轉180度，隱藏正面 */
transition: transform .5s ease-in-out;
/* 添加動畫效果 */
}
.card:hover .back {
transform: rotateY(0deg);
/* 翻轉回正面 */
transition: transform .5s ease-in-out;
/* 添加動畫效果 */
}

以上代碼實現了一個簡單的翻卡片效果。將一個元素設置為card類，再將其中的正面和背面設置為front和back類，即可達到翻轉的效果。

需要注意的是，翻卡片效果需要配合CSS3中的transform和transition屬性才能實現。其中，transform屬性用于實現元素的旋轉、縮放、傾斜等效果，而transition屬性用于制定CSS屬性變化的動畫效果。

CSS3中的翻卡片效果，不僅可以用于網頁設計中的鼠標懸停效果，還可以用于移動端應用程序中的頁面切換效果。如果想要實現更加復雜的翻轉效果，可以進一步研究CSS3中的3D變換，以及animation屬性的使用。