CSS3卡牌點擊翻轉效果的實現方法如下：

.card-container {
position: relative;
width: 200px;
height: 300px;
}
.card {
position: absolute;
width: 100%;
height: 100%;
transition: transform 0.6s ease;
transform-style: preserve-3d;
}
.card.front {
z-index: 2;
transform: rotateY(0deg);
}
.card.back {
transform: rotateY(180deg);
}
.card-container.flipped .card.front {
z-index: 1;
transform: rotateY(-180deg);
}
.card-container.flipped .card.back {
z-index: 2;
transform: rotateY(0deg);
}

其中，.card-container為卡牌容器的樣式，.card為卡牌的樣式，.card.front為卡牌正面的樣式，.card.back為卡牌背面的樣式。.card-container.flipped .card.front和.card-container.flipped .card.back為點擊后翻轉卡牌的樣式。

在HTML中，需要添加如下元素：

<div class="card-container"><div class="card front">正面內容</div><div class="card back">背面內容</div></div>

需要注意的是，正面和背面內容的寬高應與卡牌容器相同，并且背面內容需要旋轉180度。