Tips for preventing the div from disappearing when using rotateY(90deg)

Question

Tips for preventing the div from disappearing when using rotateY(90deg)

My website features a div element with an animation that gives the illusion of it being flipped over.

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

To achieve this effect, I use the jQuery plugin transit to rotate the "wrapper" div by applying the CSS rule;

transform: rotateY(180deg);

During the rotation, when the div reaches rotateY(90deg), new content is loaded into the #content div. This process happens quickly, but during the animation, the div momentarily disappears or becomes hidden.

VIEW DEMO FIDDLE (Note that the actual content loading is not included in the demo)

I am looking for a way to prevent the entire div from disappearing completely at rotateY(90).

Unfortunately, since the HTML is dynamically generated, I do not have control over it.

https://i.sstatic.net/GIch7.gif

javascript jquery html css

Answer 1

Answer №1

Consider adding some depth to the design by incorporating thickness into it. For inspiration, take a look at this example: want to show the thickness of an element while it rotates

You can achieve the desired effect with CSS animations like this: 0%: transform: rotateY(0deg); 50%: transform: rotateY(90deg); 100%: transform: rotateY(180deg);

Hopefully, this suggestion proves useful in your project.

Ensure that the jQuery plugin includes necessary CSS files or explore alternative options.

Alternatively, consider achieving the effect using basic CSS and jQuery.

Answer 2

Consider adding some depth to the design by incorporating thickness into it. For inspiration, take a look at this example: want to show the thickness of an element while it rotates

You can achieve the desired effect with CSS animations like this: 0%: transform: rotateY(0deg); 50%: transform: rotateY(90deg); 100%: transform: rotateY(180deg);

Hopefully, this suggestion proves useful in your project.

Ensure that the jQuery plugin includes necessary CSS files or explore alternative options.

Alternatively, consider achieving the effect using basic CSS and jQuery.

Answer 3

Answer №2

Let's keep the div's content intact and split it into two sections:

<div id="container">
    <div class="section-1">
        Some text here
    </div>
    <div class="section-2">
        Some more text here
    </div>
</div>

CSS Styles:

#container{
    transition: all 2s;
    position: relative;
}
#container.flip{
    transform: rotateY(180deg);
}
.section-1{
    z-index: 1;
    opacity: 1;
    position: absolute;
    height: 100%;
    transition-delay: 1s; //half of container transition time
}
.section-2{
    z-index: 0;
    opacity: 0;
    transform: rotateY(180deg);
    position: absolute;
    height: 100%;
    transition-delay: 1s;
}
.flip section-1{
    z-index: 0;
    opacity: 0;
}
.flip section-2{
    z-index: 1;
    opacity: 1;
}

Javascript Functionality:

$('.next-section').click(function(){
    $('#container').addClass('flip');
});
$('.prev-section').click(function(){
    $('#container').removeClass('flip');
});

Answer 4

Let's keep the div's content intact and split it into two sections:

<div id="container">
    <div class="section-1">
        Some text here
    </div>
    <div class="section-2">
        Some more text here
    </div>
</div>

CSS Styles:

#container{
    transition: all 2s;
    position: relative;
}
#container.flip{
    transform: rotateY(180deg);
}
.section-1{
    z-index: 1;
    opacity: 1;
    position: absolute;
    height: 100%;
    transition-delay: 1s; //half of container transition time
}
.section-2{
    z-index: 0;
    opacity: 0;
    transform: rotateY(180deg);
    position: absolute;
    height: 100%;
    transition-delay: 1s;
}
.flip section-1{
    z-index: 0;
    opacity: 0;
}
.flip section-2{
    z-index: 1;
    opacity: 1;
}

Javascript Functionality:

$('.next-section').click(function(){
    $('#container').addClass('flip');
});
$('.prev-section').click(function(){
    $('#container').removeClass('flip');
});

Tips for preventing the div from disappearing when using rotateY(90deg)

Answer №1

Answer №2

Similar questions

Deactivate Mongoose connection in Node.js after completing tasks

Ajax request not populating controller with data in ASP.NET CORE MVC

I encountered an error when attempting to integrate Node.js with my terminal in the text editor - permission was denied

Tips for swapping out textures imported from Collada with ShaderMaterial textures in Three.js

Steps to create two jQuery dropdown filters for multiple identifiers:

Ways to reduce lag while executing a for loop

Create a JavaScript JSON object using a for loop

Unlocking the JSON array of data in JavaScript: A step-by-step guide

disable collapsible effect on checkbox

Is it possible for a nodejs server to handle both grpc and express servers simultaneously, or do they need to be separate servers?

Increase the background image size for a <li> element

What is the best way to ensure two tables are aligned side by side in a horizontal

Troubleshooting Problems with Retrieving Data Using jQuery and

Tailwind custom classes are not being rendered on mobile devices and Chrome DevTools, however, they are functioning properly on desktops and Safari DevTools

Basic javascript doesn't trigger

Repetitive submissions of a form through Ajax post requests

Order of stacked divs with absolute positioning

What causes the table to expand with new cells once the database information is shown?

Looking for guidance on how to fill the "via" table in Sequelize?

Develop a function that transforms a provided string