CSS3動畫可以為網頁帶來許多生動的效果。其中前后轉動的動畫可以為頁面添加一些現代感和動感。下面我們來演示一下怎樣使用CSS3動畫實現前后轉動的效果。

/* CSS3動畫前后轉動的代碼 */
.box {
perspective: 800px;  /* 設置3D場景的透視點 */
transform-style: preserve-3d;
animation: rotate 1s ease-in-out infinite;
}
.box div {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #2196f3;
}
.box div:first-child {
transform: rotateY(0deg);
}
.box div:last-child {
transform: rotateY(180deg);
}
@keyframes rotate {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(0deg);
}
}

這段代碼中，我們首先使用perspective屬性來設置3D場景的透視點，然后設置transform-style: preserve-3d;來告訴瀏覽器該元素的子元素將會保留其3D變換。

然后我們創建了一個box容器，并在其中放置了兩個div元素，分別用來表示前面和后面的面。我們通過設置position: absolute;、top: 0;、bottom: 0;、width: 100%;和height: 100%;來使它們覆蓋整個容器。

接著我們設置了transform: rotateY(0deg);和transform: rotateY(180deg);來分別使前面和后面的面旋轉0度和180度。然后我們使用@keyframes和animation來定義和應用旋轉動畫。

最后我們可以通過修改perspective和@keyframes中的數值來調整透視點和旋轉速度等參數，以達到各種效果。