CSS3是Web設計中的一個重要的技術，它的功能非常強大，可以實現(xiàn)各種炫酷的效果，其中翻轉div是Web設計中比較常見的一個效果，它可以讓網(wǎng)頁更加美觀和生動。下面來介紹一下如何使用CSS3來實現(xiàn)翻轉div的效果。

.flip-container {
perspective: 1000px;
}
.flipper {
position: relative;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.front, .back {
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
/* 橫向翻轉 */
.flipper.horizontal:hover {
transform: rotateY(180deg);
}
.front.horizontal {
transform: rotateY(0deg);
}
.back.horizontal {
transform: rotateY(180deg);
}
/* 縱向翻轉 */
.flipper.vertical:hover {
transform: rotateX(180deg);
}
.front.vertical {
transform: rotateX(0deg);
}
.back.vertical {
transform: rotateX(180deg);
}

以上代碼中，首先需要給需要翻轉的div添加一個父容器，設置perspective屬性，它定義了3D轉換元素的透視視圖。然后，在div的子元素中分別添加front和back兩個元素，用于承載正面和背面的內容。接著，在flipper元素上設置position為relative，transition屬性用于設置動畫過渡效果，transform-style屬性設置為preserve-3d，代表當前元素及其子元素在三維空間內保持其坐標系不變。以上的代碼實現(xiàn)了橫向和縱向的翻轉效果。在橫向翻轉時，需要將flipper元素的transform屬性設置為rotateY(180deg)，將front元素的transform屬性設置為rotateY(0deg)，back元素的transform屬性設置為rotateY(180deg)。在縱向翻轉時，需要將flipper元素的transform屬性設置為rotateX(180deg)，將front元素的transform屬性設置為rotateX(0deg)，back元素的transform屬性設置為rotateX(180deg)。在使用時，只需要將需要翻轉的div包裹在flipper元素中即可。