CSS撲克牌旋轉是一種讓普通的撲克牌元素變得更加生動的技巧。代碼易懂，且在網頁設計和游戲開發中非常常見。下面我們來看一下如何使用CSS旋轉撲克牌。

.card {
width: 100px;
height: 150px;
background-color: white;
border: 2px solid black;
position: relative;
}
.card .front, .card .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card .front {
background: url('../images/ace.png') no-repeat center center;
background-size: 85% auto;
}
.card .back {
background: url('../images/back.png') no-repeat center center;
background-size: 85% auto;
transform: rotateY(180deg);
}
.card.flipped .front {
transform: rotateY(180deg);
}
.card.flipped .back {
transform: rotateY(0deg);
}

上述代碼是一個基本的CSS撲克牌旋轉樣式的實現。我們可以定義一個.card類，然后通過 .front 和 .back 兩個類來實現牌面和牌背面的樣式，同時使用 transform 屬性和 rotateY() 函數來實現旋轉效果。

最后，我們可以通過在HTML中指定 .card 和 .flipped 兩個類來控制牌面和牌背面的展示以及旋轉效果的應用，從而實現在網頁中展示出撲克牌的翻轉以及旋轉效果。