Html Question posted in
Some basic documentation can be found here.

Html – Change div content while 3d rotating

While a div is 3d rotating, I’m trying to change its content in the exact moment when it is invisible.

My method is to rotate the parent (#card) on hover for 1 second and have two children (#front and #back) change their opacity with a delay of 0.5 seconds:

#card {
  width: 200px;
  height: 200px;
  transition: 1s;
  transform: rotate3d(0, 1, 0, 0deg);
}

#card:hover {
  transform: rotate3d(0, 1, 0, 180deg);
}

#card>div {
  transition-duration: 0s;
  transition-delay: 0.5s;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#card #front {
  opacity: 1;
  background: yellow;
}

#card #back {
  opacity: 0;
  transform: rotate3d(0, 1, 0, 180deg);
  background: grey;
}

#card:hover #front {
  opacity: 0;
}

#card:hover #back {
  opacity: 1;
}
<div id="card">
  <div id="front">
    front
  </div>
  <div id="back">
    back
  </div>
</div>

https://jsfiddle.net/zpfheL14/1/

But the opacity-change happens too late, resulting in a glitchy-looking animation. Is there a way to reliably make the "animation" of the children happen in the right moment?

Tags:

2

Answers


  1. 0

    For me, the issue got solved with removing transition delay. and adding transition duration as 0.5s.

    #card>div{
  transition-duration:0.5s;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}

    But I still face some glitch, because of container being rotated. try to keep a static container to which you add the :hover action. Can rotate the child (with no hover action).

    Did this modicifation here: https://jsfiddle.net/dhbtjc1a/

    Login or Signup to reply.
  2. 0

    I don’t know if you just want a flip card but if you do, you can try the following example. The Key CSS properties we use here are transform-style: preserve-3d and backface-visibility: hidden.

    #card {
  width: 200px;
  height: 200px;
  position: relative;
}

.face-container {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: 1s;
}

#card:hover .face-container{
  transform: rotateY(180deg);
}

.card-face{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-face.front{
  background: yellow;
}

.card-face.back{
  transform: rotateY(180deg);
  background: grey;
}
    <div id="card">
  <div class="face-container">
    <div class="card-face front">
      front
    </div>
    <div class="card-face back">
      back
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search