CSS撲克旋轉是使用CSS動畫來扭曲和旋轉撲克牌的效果。這是一種非常流行的技術，在網站和應用程序設計中廣泛應用。

.card {
width: 150px;
height: 200px;
background-color: white;
border-radius: 10px;
box-shadow: 0px 5px 20px rgba(0,0,0,0.3);
position: relative;
perspective: 1000px;
}
.card .back {
position: absolute;
width: 100%;
height: 100%;
background-image: url(../images/card-back.png);
background-size: cover;
border-radius: 10px;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.card .front {
position: absolute;
width: 100%;
height: 100%;
background-image: url(../images/card-front.png);
background-size: cover;
border-radius: 10px;
backface-visibility: hidden;
}
.card:hover .front {
transform: rotateY(180deg);
}
.card:hover .back {
transform: rotateY(0deg);
}

上面的CSS代碼演示了如何使用扭曲和旋轉來創建撲克牌的效果。要實現這個效果，我們使用了CSS的transform和transition屬性。

在.card中，我們使用了perspective屬性來創建三維視角。然后我們使用.back和.front類來定義撲克牌的前面和后面。我們使用了backface-visibility:hidden屬性來隱藏倒置的面。我們將.back旋轉了180度，以便我們可以在鼠標懸停在.card上時顯示扭曲的.front面。

最后，我們使用:hover偽類來添加動畫效果。我們簡單地將.front的transform屬性設置為rotateY(180deg)，以便將其扭曲。然后我們將.back的transform屬性設置為rotateY(0deg)，以便它重新顯示。

總的來說，CSS撲克旋轉是一種很酷的技術，可以增強你的網站和應用程序的交互性和視覺吸引力。如果您還沒有嘗試過這種效果，那么現在就是時候了！