Sidebar Transitions 是多种形式侧边栏滑块的 jQuery 插件，其中包括 3D 旋转滑出，3D 延迟旋转滑出，3D 旋转消失，直接推出，从上往下滑出等等有创意的 off-canvas 导航滑出效果。
今天我们想与大家分享一套过渡效应。这一次我们将探讨边栏或关闭一样，我们使用多层次推菜单画布的内容转换。这个想法是显示一些隐藏的侧边栏有微妙的过渡元素本身也对剩余的内容。
通常的侧边栏滑动，推到一边等内容。但有更多的可能性，微妙的和幻想的影响，今天我们要给你一些启示。
我们的演示的结构是非常具体的，因为我们希望能够在一页中显示所有的效果。但总的来说，我们需要一个侧边栏的元素，将内部或外部的推包装，取决于我们是否想补充是最顶级的包装或下推。
所以，我们将有
<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"> <div class="st-content-inner"> <!-- 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"> <div class="st-content-inner"> <!-- the content --> </div><!-- /st-content-inner --> </div><!-- /st-content --> </div><!-- /st-pusher --> </div><!-- /st-container -->
一个例子的效果是以下。我们向主容器添加一个透视值，然后在三维空间中旋转推包装器和菜单：
.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);
}
注意，我们在这里只使用可见性因为我们在演示多个侧边栏。如果你有一个侧边栏，你不必设置能见度值从隐藏可见。
有些浏览器不支持转换的伪元素（我们的覆盖），所以你可能会看到在这些浏览器快速闪烁（有些手机浏览器）。
IE10不支持变换风格：preserve-3d这将打破嵌套三维转换元件。我们用这个例子，这样你就不能正确地看到这些效果的影响。
我们希望这个系列能给你一些灵感，创造一些不错的效果，我希望你喜欢这些工具转换和找到他们鼓舞人心！
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索浏览器
jquery侧边栏插件、jquery滑块验证码插件、jquery滑块插件、jquery 滑块时间插件、jquery 数值滑块插件，以便于您获取更多的相关知识。