Deferred animation sync for different elements in 3D CSS translation?
So I have a basic setup for CSS flip in this script: http://jsfiddle.net/6r82fzk6/
What It Is: CSS 3D Flip (container, card, front and back elements) with front and back children. The flip happens on: Hover over the demo.
What I am trying to achieve: To get the reverse element to transition is slower than anything else. So by the time the map and backside are displayed, the backsurface child ( #be
) is halfway through its transition.
What I have so far: Below is a code snippet. You can open the JSFiddle link to see it in action. Its a black gradient element I am trying to defer.
#container {
perspective: 800px;
position: relative;
width: 300px;
height: 300px;
margin: 1px auto;
}
#card {
transform-style: preserve-3d;
transition: all 1s ease-in-out;
position: relative;
}
#container:hover #card {
transform: rotateY(180deg);
}
#front,
#back {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 300px;
backface-visibility: hidden;
transform-style: preserve-3d;
}
#front {
background: red;
z-index: 2;
}
#back {
transform: rotateY(180deg);
background: blue;
}
#fe,
#be {
position: absolute;
top: 20px;
left: 20px;
transform: translateZ(50px);
}
#fe {
width: 50px;
height: 50px;
background: gold;
box-shadow: 0 0 4px black;
}
#be {
width: 260px;
height: 260px;
box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.6), 0 1px 3px whitesmoke inset;
background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
}
<!-- Outside container -->
<div id="container">
<!-- Card being flipped -->
<div id="card">
<!-- Front face -->
<div id="front">
<!-- Front Child element -->
<div id="fe"></div>
</div>
<!-- Back face -->
<div id="back">
<!-- Back Child element -->
<div id="be"></div>
</div>
</div>
</div>
To clarify: this is not production code, more for testing and understanding. I try so hard.
source to share
You cannot do this in your current setup.
This is because you are not moving the front or back, but the container.
If you want them to move differently, you must move them directly and not into the container.
#container:hover #front {
transform:rotateY(180deg);
}
#container:hover #back {
transform:rotateY(360deg);
}
#front {
transition:all 1s ease-in-out;
}
#back {
transition:all 2s ease-in-out;
}
source to share