CSS3是Web前端開發人員必備的技能之一，如今越來越多的應用和網站需要有更炫酷的UI效果來吸引用戶的眼球。其中，鼠標經過時翻轉效果是非常常見且具有吸引力的一個效果。那么，在CSS3中，如何實現鼠標經過時的翻轉效果呢？

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

上述代碼實現了一個簡單的鼠標經過時翻轉的效果。首先，父容器flip-box設置了透視效果perspective和位移transition，內部容器flip-box-inner也設置了透視效果和變換transform。flip-box-inner內部有兩個div，一個是flip-box-front正面顯示的內容，另一個是flip-box-back背面顯示的內容。通過設置鼠標經過時flip-box-inner的變換transform: rotateY(180deg)實現翻轉效果。

總的來說，鼠標經過時翻轉效果是Web前端開發中非常有用的技能，通過上述代碼可以實現簡單的翻轉效果并可以進一步擴展。希望本篇文章對大家在CSS3的學習和應用中有所幫助。