时间:2021-07-01 10:21:17 帮助过:1人阅读
温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
立即下载 在线演示
因为我们希望能够在一个页面上展现所有的效果,因此我们示例的结果都是非常具体的。但在一般情况下,我们需要在 Push 容器内部或者外部的侧边栏元素,这取决于我们是要把侧边栏显示在 Push 容器的上面还是下面。所以,有两种 HTML 结构,第一种实现的代码如下:
或者是下面这种结构:
效果七的 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 转换元素。所以有部分例子你将不能够正确地看到那些效果。
我们希望这个集合给你一些灵感,创造出一些不错的效果。希望你会喜欢!
立即下载 在线演示