CSS 3鼠标输入时的翻转效果

我想在鼠标输入时显示内容，并具有翻转效果，如本示例网站所示

---

当您将鼠标悬停在“驾驶交通”区域时，会翻转一个蓝色的div。如何使用CSS3实现这一点？

答案就在代码中。使用浏览器的检查工具查找每个元素的相关代码。在StackOverflow上，我们通常不提供免费赠品，也就是说，我们希望你做一些努力，而不是简单地来这里索取这个或那个。既然你知道了这一点。这取决于你使它适合你的需要

.cta3 li {
  perspective: 1000;
  padding: 0;
  display: block;
  width: 33.3%;
  text-align: center;
  float: left;
  position: relative;
}

.cta3 li .cta3 {
  opacity: 0;
  transform-origin: bottom;
  transform: rotateX(90deg);
  transition: 400ms;
  width: 100%;
  position: absolute;
  bottom: 0;
  background: #3570CC;
  text-align: center;
  z-index: 2000;
  font-size: 15px;
  padding: 20px;
}

.cta3 li:hover .cta3 {
  bottom: -10px;
  opacity: 1;
  transform: rotateX(0deg);
}

---

不，我没有试过，因为我没有太多的想法。你应该试着自己做这件事，如果你觉得自己被卡住了，请寻求帮助。但如果你不知道如何开始，也许阅读CSS和HTML的基础知识将是你旅程中的一个良好开端。非常感谢它为我工作，我得到了在这里张贴答案的指示：-）