Question

我有疑问。

我需要实现翻转菜单，但在互联网上我发现只有使用css转换和供应商前缀的示例。但是所有的例子都显示了不固定的div，而下面的css有一个固定的菜单（复制和粘贴的代码并减少网络，不是很漂亮）当我有一个菜单和put字体和后面div的方法'工作。

我需要帮助。我需要一种方法，其中整个网站（包括设置菜单）被其他内容替换（作为一个伟大的页面翻转）。

我需要水平翻转，右侧水平翻转。

非常感谢你。

CodePen：http://codepen.io/anon/pen/BuHql

HTML：

<div class="nav">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">CSS</a></li>
        <li><a href="">PHP</a></li>
        <li><a href="">SEO</a></li>
        <li><a href="">jQuery</a></li>
        <li><a href="">Wordpress</a></li>
        <li><a href="">Services</a></li>
    </ul>
    <div class="clear"></div>
</div>
</div>

CSS：

body { height: 800px; background: black; }
.nav{ background: white; z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;}

.nav { height: 42px; background: white;}
.nav ul { list-style: none; }
.nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}
.nav ul li:first-child{ padding-left: 0;}
.nav ul li a { }
.nav ul li a:hover{ text-decoration: underline;}

Answer 1

在其他情况下，一种简单的方法是使用以下结构：

HTML：

<div class="flipper">
    <div class="front">Front content</div>
    <div class="back">Back content</div>
</div>

CSS：

/*Placing colors to facilitate understanding.*/
.front { background: green; }
.back { background: red; }

/*Add this class to a  ".flipper" element using the way that is well to you (using a    click, a hover or any other trigger).*/
 .flip {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    /*Add others vendors styles to more compatibility*/
}
/*Configuring the duration and the 3d mode of command*/
 .flipper {
    position: relative; /*relative is very important*/
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: 2s;
    -webkit-transition: 0.6s;
}

/*Required for no appear both at the same time*/
.front {
    z-index: 2;
}

/*Causes the back start hidden (it is rotated 180 degrees, so it will not appear)*/
 .back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

/*Hide the rear face during the flip.*/
 .front, .back {
    position: relative; /*Again, the relative position is very important to work on any layout without crash.*/
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/*needed for webkit browsers understand what's in front and what is behind*/
body {
    perspective: 1000;
    -webkit-perspective: 1000;
}

JS（jQuery）使用示例：

$('body').hover(function () {
    $('.flipper').addClass('flip');
});
$('body').click(function () {
    $('.flipper').removeClass('flip');
});

Answer 2

有一个简单的jquery插件可以帮助你实现这种效果。

你可以在这里找到它： http://guilhemmarty.com/flippy//

它易于使用，您可以选择您想要的翻转类型。 ;）

带固定顶部菜单的翻转菜单

2 个答案: