CSS 3 鼠标进入翻转效果

Question

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

当您将鼠标悬停在“驱动交通”部分时，会翻转一个蓝色 div。我如何使用 CSS3 执行此操作？

Answer 1

答案就在代码中。使用浏览器的检查工具来查找每个元素的相关代码。在 Whosebug 上，我们通常不提供免费赠品，即我们希望您付出一些努力，而不是简单地来这里索要这个或那个。既然你知道了，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 3 鼠标进入翻转效果

CSS 3 flip effect on mouse enter

css

css-transitions