How to CSS flip to backside.?

Hi.  I'm trying to flip(or turn to the backside) of a element to display different content.  It's a div element with a border containing an input and some p.  After input on press I want to animate the container to flip to the back revealing another input element. Either that or just flip the input element to reveal another input (email to text). For the latter I'd hide the p element?

1 Answer

Relevance
  • oyubir
    Lv 6
    1 week ago

    I guess what your are looking for are

    CSS property transform rotateY, perspective.  And animation.

    div.mydiv {

        transform: rotateY(45deg);

    }

    turn the div of 45 degrees around vertical axis (so, as if you were rotating your screen to show it to your neighbour)

    Because rotateY alone seems to be just the same as a scaleX (because, by default your are looking from infinite. So, flat perspective), you should add a perspective (distance from which you look at the image. It should be bigger than image width, or else you'll have strange effect when image is at 90deg).

    div.mydiv {

       transform: perspective(1000px) rotateY(45deg);

    }

    And then, you should animate that with keyframes and animation.

    So your final css:

    @keyframes myflip {

    from {transform: perspective(1000px) rotateY(0deg);}

    to {transform: perspective(1000px) rotateY(180deg);}

    }

    And use it:

    div.mydiv{

       animation: 4s myflip;

    }

Still have questions? Get your answers by asking now.