CSS卡片反轉是一種比較常用的效果，可以把卡片在用戶交互時快速反轉，達到視覺上的翻轉效果，如下面的示例：

/* 卡片外框 */
.card {
width: 200px;
height: 200px;
perspective: 800px; /* 實現 3D 效果的關鍵，指定透視距離 */
}
/* 卡片正面 */
.front {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transform-origin: center center; /* 指定變換的中心點 */
transform: rotateY(0deg); /* 保持卡片正面不變 */
transition: transform 0.5s ease; /* 動效平滑 */
}
/* 卡片背面 */
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #00f;
transform-origin: center center; /* 指定變換的中心點 */
transform: rotateY(180deg); /* 初始狀態是翻轉后的背面 */
transition: transform 0.5s ease; /* 動效平滑 */
}
/* 當卡片容器被用戶點擊時，卡片進行翻轉 */
.card:hover .front {
transform: rotateY(180deg);
}
.card:hover .back {
transform: rotateY(0deg);
}

代碼中主要有三個部分：卡片外框、卡片正面、卡片背面。其中，用 perspective 指定了透視距離，保證卡片有 3D 效果，而 transform-origin 則指定了旋轉軸心位置。

當用戶鼠標懸停在卡片上時，.front 和 .back 分別進行反轉，實現翻轉效果。

需要注意的是，CSS卡片反轉主要是通過 transform 屬性來實現的，其中 rotateY 指定了繞 Y 軸旋轉的角度，同時還需要指定過渡效果。