Here is a CSS flip setup that I have been working on in this fiddle: http://jsfiddle.net/6r82fzk6/
The Goal: I am trying to achieve a slower transition for the back element compared to everything else. The idea is to have the child element of the back face (#be) halfway through its transition by the time the card flips and the back side becomes visible.
Current Progress: Below is the code snippet. You can view it in action using the JSFiddle link provided. My focus is on delaying the black gradient element.
#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>Please note that this code is not intended for production, but rather for testing and exploration purposes.