因為我們希望能夠在一個頁面上展現所有的效果，因此我們示例的結果都是非常具體的。但在一般情況下，我們需要在 Push 容器內部或者外部的側邊欄元素，這取決於我們是要把側邊欄顯示在 Push 容器的上面還是下面。所以，有兩種 HTML 結構，第一種實現的程式碼如下：
<div id="st-container" class="st-container"> <!-- content push wrapper --> <div class="st-pusher"> <nav class="st-menu st-effect-1" id="menu-1"> <!-- sidebar content --> </nav> <div class="st-content"><!-- this is the wrapper for the content --> <div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu --> <!-- the content --> </div><!-- /st-content-inner --> </div><!-- /st-content --> </div><!-- /st-pusher --> </div><!-- /st-container -->
或者是下面這種結構：
<div id="st-container" class="st-container"> <nav class="st-menu st-effect-1" id="menu-1"> <!-- sidebar content --> </nav> <!-- content push wrapper --> <div class="st-pusher"> <div class="st-content"><!-- this is the wrapper for the content --> <div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu --> <!-- the content --> </div><!-- /st-content-inner --> </div><!-- /st-content --> </div><!-- /st-pusher --> </div><!-- /st-container -->
效果七的 CSS 程式碼如下。我們把透視值新增到主容器，然後我們以 3D 效果旋轉 Push 容器和選單 ：
.st-effect-7.st-container {
perspective: 1500px;
perspective-origin: 0% 50%;
}
.st-effect-7 .st-pusher {
transform-style: preserve-3d;
}
.st-effect-7.st-menu-open .st-pusher {
transform: translate3d(300px, 0, 0);
}
.st-effect-7.st-menu {
transform: translate3d(-100%, 0, 0) rotateY(-90deg);
transform-origin: 100% 50%;
transform-style: preserve-3d;
}
.st-effect-7.st-menu-open .st-effect-7.st-menu {
visibility: visible;
transform: translate3d(-100%, 0, 0) rotateY(0deg);
}請注意，我們在這裡使用 visibility 屬性，因為在我們的演示中有多個側邊欄。如果你只是有一個側邊欄，你將不必把 visibility 屬性從hidden 設定為 visible。
另外有些瀏覽器不支援偽元素（我們用來實現遮罩）的過渡（transitions），所以你在這些瀏覽器可能會看到一個快速閃爍（例如一些手機瀏覽器）。還有就是，IE10 不支援 transform-style: preserve-3d 效果，會破壞巢狀的 3D 轉換元素。所以有部分例子你將不能夠正確地看到那些效果。
我們希望這個集合給你一些靈感，創造出一些不錯的效果。希望你會喜歡！
評論(1)