How to make the div not dissapear when rotateY(90deg)

Question

On my webpage I have a div. On that div I have "animation" that simulates the div being turned over (flipped).

<div id="wrapper">
    <div id="content">
        Some content
    </div>
</div>

I rotate the "wrapper" div with the jQuery plugin transit. What the plugin does is just apply the CSS;

transform: rotateY(180deg);

When the div is on rotateY(90deg), I have to load some new content in the #content div. This takes a minuscule amount of time, but in the animation you can see that the div is gone/hidden fore that time.

SEE DEMO FIDDLE (note that I don't have the actual content loading in here)

Is it possible to have the dive not totally disappearing when rotateY(90)?

Unfortunately I have no control over the HTML itself because it is being generated.

Answer 1

Try to add thickness to it. Refer to something like this: want to show the thickness of an element while it rotate

But make the animation of the css: 0%: transform: rotateY(0deg); 50%:transform: rotateY(90deg); 100%:transform: rotateY(180deg);

Hope this helps.

Make sure the jQuery plugin has css files or look into it.

And also you could do this using basic css and jQuery.