在網頁設計中，經常需要使用到卡片的效果來展示信息。

而CSS卡片3D效果就是一種非常流行的卡片效果，通過CSS3中的transform屬性和transition屬性來實現卡片的3D效果。

.card{
width: 300px;
height: 200px;
position: relative;
perspective: 1000px;
}
.card-inner{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card:hover .card-inner{
transform: rotateY(180deg);
}
.card-front, .card-back{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card-back{
transform: rotateY(180deg);
}

上面的代碼是實現CSS卡片3D效果的關鍵代碼。

首先，將卡片的perspective設置為1000px，讓翻轉效果更加真實。

其次，通過設置卡片內部元素的transform-style為preserve-3d來創建一個3D空間，使得元素在平面內進行旋轉或移動時，能夠產生立體感。

當鼠標移入卡片時，通過設置.card:hover .card-inner的transform: rotateY(180deg);來使得卡片在Y軸方向上產生180度的旋轉，從而實現3D翻轉效果。

最后，為了保證卡片反面不會展示出來，需要將 .card-back的transform設置為rotateY(180deg);同時將 .card-front和.card-back的backface-visibility設置為hidden。

通過使用CSS卡片3D效果，可以為網頁設計帶來更加生動、鮮明的效果，使得頁面更加吸引人。