悬停菜单时如何在垂直翻转中显示子菜单？

Question

我一直试图在悬停菜单（子菜单）时进行垂直翻转，但花了这么长时间搞清楚，仍然无法找到解决方案！我想像这个网站菜单翻转http://www.elegantthemes.com/preview/Extra/

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
	/* flip the pane when hovered */
	.sub:hover ~ .flipper{
		transform: rotateX(180deg);

	}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

/* flip speed goes here */
.flipper {
	padding: 5rem;
	background: red;
	transition: 0.6s;
	transform-style: preserve-3d;
	transform-origin: 100% 213.5px;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateX(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateX(-180deg);
}
* {
	margin:0;
	padding: 0;
	font-size: .95rem;
}
nav {
	display: inline-flex;
	list-style-type: none;
	width: 100%;
	background: #ccc;
}
nav li {
	color:#494949;
	padding: 1rem;
	width: 30%;
	text-align: center;
	cursor: pointer;
}
nav li:hover {
	background: #fff;
}
@media (min-width: 800px) {
	nav li {
		width: 6rem;
	}
}

<nav>
	<li class="sub">Submenu ^</li>
	<li>About</li>
	<li>Contact</li>
</nav>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			front content
		</div>
		<div class="back">
			back content -->
		</div>
	</div>
</div>

Answer 1

这是你在找什么？我认为秘诀是你最初只想旋转90度，所以你不必担心背面或其他任何东西。 https://jsfiddle.net/97b865hc/6/

HTML

<div id="menu">
  Main Menu
  <div id="submenu">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
</div>

CSS

#menu {
  position: absolute;
  top: 10px;
}
#submenu {
  background-color: red;
  transform: rotateX(90deg);
  transform-origin: 0% 0%;
}
#menu:hover #submenu {
  animation-duration: 3;
  transform: none;
  transition: all 2s;
}