Question

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

所示

当您将鼠标悬停在“云端硬盘路径”部分时，会翻转蓝色的div。我怎么能用CSS3做到这一点？

Answer 1

答案就在代码中。使用浏览器的检查工具查找每个元素的相关代码。在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 3对鼠标的翻转效果输入

1 个答案: