make a div fold out to show content

问题:

I am trying to achieve the same effect here so when you hover on the div it folds out and shows the content, but I cannot figure out how to do this.

So far I am able to make the content slide in by using the following code. Code underneath and 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%;
  }
}

回答1:

The animation is in :hover, it's called the flip card effect.

You can alter the effect by playing around with the transform & transition values.

Cubic bezier if you're wondering where to get the values for the cubic-bezier function.

.outer-wrapper {
  position: absolute;
  left: 0;
  top: 0;
}
.outer-wrapper:nth-child(2) {
  left: 600px;
}
.outer-wrapper:nth-child(3) {
  top: 300px;
}
.wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 0 20px;
}
.background-out,
.background-over {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.background-info {
  position: absolute;
  left: 200px;
  top: 0;
  width: 100%;
  height: 100%; 
  visibility: hidden;
  opacity: 0.2;
  transform-origin: 0% 50% 0px;
  transform: rotateY(-90deg);
  background-color: grey;
}
.background-info .text {
  padding: 5px;
}
.background-out {
  background-color: red;
}
.background-over {
  background-color: green;
  visibility: hidden;
  opacity: 0;
  transform-origin: 100% 50% 0px;
  transform: rotateY(-90deg);
}
.wrapper:hover .background-out {
  visibility: hidden;
}
.wrapper:hover .background-over,
.wrapper:hover .background-info {
  transform: translate3d(0px,0px,0px) rotateY(0deg);
  transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms,
-moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms,
-webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
  visibility: visible;
  opacity: 1;
}

  <div class="outer-wrapper">
    <div class="wrapper">
      <div class="background-out"></div>
      <div class="background-over"></div>
      <div class="background-info">
        <div class="text">Text 1</div>
       </div>
    </div>    
  </div>
  <div class="outer-wrapper">
    <div class="wrapper">
      <div class="background-out"></div>
      <div class="background-over"></div>
      <div class="background-info">
        <div class="text">Text 2</div>
       </div>
    </div>    
  </div>
  <div class="outer-wrapper">
    <div class="wrapper">
      <div class="background-out"></div>
      <div class="background-over"></div>
      <div class="background-info">
        <div class="text">Text 2</div>
       </div>
    </div>
  </div>

回答2:

I'm going to try and guide you in the right direction. They're using 3D transforms to create the flip card effect, alongside the transform-origin property. Here's a link to a tutorial showing an effect on which you can base your code:

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

Also, here's a live example. It's probably not exactly what you need, but it will help you.

.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>