Question

任何人都可以给我一个关于如何垂直翻转div以便自动显示其他内容的示例吗？

Answer 1

你可以通过CSS过渡实现这一点。

以下是this post的摘录。它演示了鼠标悬停时垂直（或水平）翻转div。

＆＃13;

/* entire container, keeps perspective */

.flip-container {
  perspective: 1000;
  transform-style: preserve-3d;
}
/* flip the pane when hovered */

.flip-container:hover .back {
  transform: rotateY(0deg);
}
.flip-container:hover .front {
  transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
  width: 320px;
  height: 480px;
}
/* flip speed goes here */

.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
/* hide back of pane during swap */

.front,
.back {
  backface-visibility: hidden;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
}
/*  UPDATED! front pane, placed above back */

.front {
  z-index: 2;
  transform: rotateY(0deg);
}
/* back, initially hidden pane */

.back {
  transform: rotateY(-180deg);
}
/* 
	Some vertical flip updates 
*/

.vertical.flip-container {
  position: relative;
}
.vertical .back {
  transform: rotateX(180deg);
}
.vertical.flip-container:hover .back {
  transform: rotateX(0deg);
}
.vertical.flip-container:hover .front {
  transform: rotateX(180deg);
}
/* Set backround */

.front {
  background-color: blue;
}
.back {
  background-color: red;
}

＆＃13;

<div class="vertical flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      Front
      <!-- front content -->
    </div>
    <div class="back">
      BACK
      <!-- back content -->
    </div>
  </div>
</div>

＆＃13;

请注意，旧版浏览器不支持CSS转换。您可以找到支持的浏览器的完整列表here。

我希望这会有所帮助。

在angularJS中自动翻转div

1 个答案: