CSS3翻轉按鈕是一種很有趣的交互設計，可以讓頁面元素在鼠標懸浮時翻轉并顯示不同的信息。下面我們來學習如何使用CSS3實現這種效果。

.flip-box {
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 200px;
height: 200px;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
.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);
}

以上是實現CSS3翻轉按鈕的核心代碼。首先，我們需要在外層元素中設置perspective屬性，這個屬性是定義透視視圖的，可以讓元素在3D空間中更加真實。接下來，我們在內部元素中設置transition和transform屬性，讓元素在旋轉時有過渡效果。

然后，我們在hover狀態下將內部元素旋轉180度，這樣就可以翻轉按鈕了。最后，我們需要分別定義正反兩面的樣式，將它們分別放到內部元素的兩個子元素中。

總的來說，CSS3翻轉按鈕需要一些基本的3D知識和對CSS動畫的掌握，但只要掌握了基本原理，實現起來還是比較容易的。