CSS垂直翻轉是一種非常漂亮的效果，可以讓你的網站看起來更有吸引力和創新感。下面是如何使用CSS實現垂直翻轉效果的簡單介紹。

.flip-container {
	position: relative;
margin: 10px auto;
perspective: 1000px;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
	transform: rotateX(180deg);
}
.flipper {
	position: absolute;
transform-style: preserve-3d;
transition: 0.5s;
}
.front, .back {
	backface-visibility: hidden;
	position: absolute;
}
.front {
	z-index: 2;
}
.back {
	transform: rotateX(180deg);
}
.flip-container.vertical {
	-webkit-perspective: 800px;
perspective: 800px;
height: 200px;
}
.flip-container.vertical .flipper {
	transform-origin: 100% 100%;
}
.back.vertical {
	top: 0;
transform: rotateX(-180deg);
}

首先，你需要一個包含前/后兩個元件的外層容器。這個容器需要進行定位，并設置透視視角（通過將這個容器的perspective屬性設置為非0值）。這會啟用立體效果，讓子元素可以以三維形式進行轉換。

接下來，在容器的子元素中，你需要兩個元素分別代表前和后各自的狀態，例如 div.front 和 div.back。這些元素必須設置絕對定位和backface-visibility:hidden屬性來確保正面和反面呈現的是不同的部分。

最后，使用transform-style: preserve-3d屬性，將要旋轉的元素從平面轉換為三維空間。同時給這些元素添加一個類(.flipper)來表示兩個元素已經準備好進行翻轉。在這個類中添加一個transform: rotateX()變量來定義旋轉方向，和一個transition屬性來控制過渡時間。

最后，通過在容器上添加:hover 或 .hover類并在 .flipper 上應用一個簡單的旋轉變換，可以實現在鼠標懸停時進行翻轉的效果.

如果需要實現垂直翻轉效果，只需將容器的高度設置為所需值并將 flip-container 類改為 vertical。add .back.vertical class，rotateX(-180deg)，并添加適當的轉換-origin值。