PHP教程 Css教程 操作系统 数据库

一个例子的效果是以下。我们向主容器添加一个透视值，然后在三维空间中旋转推包装器和菜单：

css;toolbar:false">.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这将打破嵌套三维转换元件。我们用这个例子，这样你就不能正确地看到这些效果的影响。

我们希望这个系列能给你一些灵感，创造一些不错的效果，我希望你喜欢这些工具转换和找到他们鼓舞人心！

• 上一个： WordPress屏蔽主题或者插件加载的jQuery文件

• 下一个： Circliful简约的圆形统计图表jQuery插件