卡片旋轉是網頁設計中常用的一種效果，通過CSS可以很容易地實現。以下是實現卡片旋轉的CSS代碼：

.card{
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d; /*開啟3D設置*/
transition: transform 1s; /*設置過渡效果*/
}
.card .front,
.card .back{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /*設置隱藏背面效果*/
}
.card .front{
background: #f00;
}
.card .back{
transform: rotateY(180deg); /*將卡片翻轉180度*/
background: #00f;
}
.card:hover{
transform: rotateY(180deg); /*鼠標移上去時旋轉*/
}

以上代碼定義了一個名為"card"的卡片，其中包含一個"front"和一個"back"元素。通過設置"transform-style"屬性開啟3D設置，"transition"屬性設置過渡效果。通過設置"backface-visibility"屬性隱藏背面，"transform"屬性將"back"元素翻轉180度。最后，通過定義:hover偽類使卡片在鼠標移上去時旋轉。

使用這段代碼可以實現簡單的卡片旋轉效果，網頁設計中可以用來展示產品信息、特色等內容。同時，也可以根據需要修改代碼中的屬性值，實現不同的卡片效果。