小编use*_*403的帖子

基本上我需要一个菜单​​汉堡,可以打开和关闭整页菜单,但我无法让编码一起工作.

所以我创建了菜单汉堡动画切换和单页菜单分别工作正常,现在我不知道如何将它们放在一起,我已经尝试了很长时间但似乎无法使其工作,任何人都可以帮忙吗？

以下是代码的链接:

1.菜单汉堡FIDDLE

CSS:

body {
    padding: 0px;
}

.border {
    position: fixed;
    background: #f9f8f3;
}

.top, .bottom {
    left: 0;
    right: 0;
    height: 50px;
}

.top {
    top: 0;
}

.bottom {
    bottom: 0;
}

.right, .left {
    top: 0;
    bottom: 0;
    width: 50px;
}

.right {
    right: 0;
}

.left {
    left: 0;
}

/* End of -->> Body border */


/* Nav */

.c-hamburger {
  display: block;
  position: fixed;
  left: 0px;
  bottom: 0px;
  overflow: hidden;
  margin: …

基本上我正试图创建我在这个网站上找到的这种翻转效果

单击最右边的箭头(以查看在彩色部分最右侧悬停的箭头)可以看到对主标题和副标题的影响,这会使标题向上翻转.

我真的不知道怎么做这个效果,所以我在网上找到了一个例子,但问题是它有悬停状态,我无法理解如何让它在页面加载时自动启动而不是徘徊.正如你在这个例子中看到的那样,反面A和B都是彩色的,我希望从A面开始是背景白色,文字是白色然后将其翻转成彩色版本,所以用其他单词从不可见到可见.

在这里查看我的工作演示

此示例的代码如下:

/* Set-up */
body {
  color: rgb(6, 106, 117);
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 100%;
  background: #F4F6F8;
  padding: 3em 0 0 0;
  line-height: 62px;
  -webkit-perspective: 1000px;  /* <-NB */
}
/* Container box to set the sides relative to */
.cube {
  width: 30%;
  text-align: center;
  margin: 0 auto;
  height: 100px;
  -webkit-transition: -webkit-transform .33s;
  transition: transform .33s;  /* Animate the transform properties */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;  /* <-NB */
}
/* …