css - 鼠标进入CSS 3翻转效果

我想在鼠标输入上显示具有翻转效果的内容，如本示例网站http://www.taboola.com/所示

当您将鼠标悬停在“交通流量”部分时，就会翻转一个蓝色的div。我该如何使用CSS3？

最佳答案

答案就在代码中。使用浏览器的检查工具查找每个元素的相关代码。在StackOverflow上，我们通常不提供免费赠品，即，我们希望您做出一些努力，而不仅仅是来这里索要。现在您知道了，I extracted the relevant code from the source code。使它适合您的需求由您决定。

.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 - 鼠标进入CSS 3翻转效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30120143/