CSS是一種非常重要的前端技術，它不僅可以讓網站頁面變得更加漂亮，同時也可以增加用戶體驗。下面我們就來了解一些CSS的優秀效果。

/* CSS 3D 立方體翻轉 */
.cube {
position: relative;
display: inline-block;
perspective: 1000px;
transform-style: preserve-3d;
transition: all .5s ease-in-out;
}
.cube:hover {
transform: rotateY(180deg);
}
.cube .side {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
font-size: 32px;
font-weight: bold;
color: #fff;
background-color: #333;
}
.cube .side.front {
transform: translateZ(50px);
}
.cube .side.back {
transform: translateZ(-50px) rotateY(180deg);
}

這是一種利用CSS 3D變換可以構建的真正立方體效果。通過設置perspective屬性，CSS 將會把元素看作在一個 3D 空間中。transform-style 值為 preserve-3d，表示這些元素會同時保留其 3D 身份，旋轉時不會產生任何扁平化的效果。當鼠標懸浮在元素上的時候，就會運用到CSS過渡屬性實現翻轉動畫。

/* 版本號按鈕 */
.version-btn {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
color: #fff;
text-align: center;
background-color: rgba(0, 0, 0, .6);
font-size: 14px;
opacity: 0;
transition: opacity .2s ease-in-out;
}
.version-btn:hover {
opacity: 1;
}
@media screen and (max-width: 768px) {
.version-btn {
display: none;
}
}

這是一種常見的按鈕效果，它可以放在頁面角落或者單獨作為一個元素。默認情況下，這個按鈕是透明的，當鼠標懸停在其上時，按鈕透明度逐漸變為1。利用媒體查詢屏幕大小，可以實現在移動端不顯示按鈕。