CSS3 3D翻轉是Web開發中的一種炫酷效果，它可以讓元素在三維空間中進行360度的翻轉展示，而且可以同時展示2面。下面簡單介紹一下如何使用CSS3 3D翻轉。

.card {
width: 300px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.card .front,
.card .back {
display: block;
position: absolute;
width: 100%;
height: 100%;
line-height: 200px;
text-align: center;
font-size: 50px;
color: white;
backface-visibility: hidden;
}
.card .front {
background-color: tomato;
transform: rotateY(0deg);
z-index: 2;
}
.card .back {
background-color: blueviolet;
transform: rotateY(180deg);
}
.card:hover {
transform: rotateY(180deg);
}

上述代碼中，.card是需要進行3D翻轉的元素，其中學習者可以修改width、height、font-size等樣式來改變元素的大小和字體大小。.card .front和.card .back是2面的正反面，可根據實際需求修改背景顏色等樣式。backface-visibility: hidden;可以讓元素翻轉時不顯示背面。

最后，在.card:hover下，將元素翻轉180度，達到翻轉效果。可以根據實際需要調整觸發事件和翻轉度數。