html - 制作一个 div 展开以显示内容

Question

我正在努力实现 same effect here因此，当您将鼠标悬停在 div 上时，它会展开并显示内容，但我不知道该怎么做。

到目前为止，我可以使用以下代码使内容滑入。下面的代码和jsfiddle can be seen here .

html

<div class="artist artist-1"></div>
<div id="artist-text">Hi there</div>

CSS

.artist-1:hover + #artist-text {
  display: block;
}

#artist-text {
  display: none;
  background-color: #000000;
  width: 130px;
  padding: 10px;
  position: absolute;
  left: 50%;
  top: 60%;
  animation-duration: 1s;
  animation-name: slideLeft;
}

.artist {
  height: 100px;
  width: 100px;
}

.artist-1 {
  background-color: red;
  position: absolute;
  left: 20%;
  top: 40%;
}

@keyframes slideLeft {
  from {
    margin-left: 100%;
    width: 100%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Answer 1

我将尝试引导您朝着正确的方向前进。他们使用 3D 转换来创建翻转卡片效果，以及 transform-origin 属性。这里有一个教程链接，显示了您可以作为代码基础的效果:

https://desandro.github.io/3dtransforms/docs/card-flip.html

另外，这里有一个活生生的例子。它可能不是您所需要的，但它会帮助您。

.card, .card-flip {
  position:absolute;
  display:block;
  background:lightgreen;
  width:200px;
  height:300px;
}

.card {
  z-index:1;
}

.container {
  perspective: 800px;
}

.card-flip {
  background:lightblue;
  margin-left:200px;
  transition: transform 1s;
  transform-origin:left;
  transform:rotateY(120deg);
  z-index:0;
}

.container:hover .card-flip {
  transform:rotateY(0deg);
}

<div class="container">
  <div class="card"></div>
  <div class="card-flip"></div>
</div>