CSS Picture Flip Animation technology detailed

Because I am constantly being asked, now I add: IE is to support this technology! Although it will be very troublesome. What you need to do is rotate front and back element, not rotate the entire container element. If you are using the latest version of IE, you can ignore this section. Ie10+ is supported, and IE9 does not support CSS animations at all.

CSS animations are very interesting, and the beauty of this technique is that by using a lot of simple attributes, you can create beautiful blanking effects that even the Pico Animation company will marvel at. One of the representative is the CSS image rollover effect, can let you see a card on both sides of the content. This article is about the simplest way to introduce you to how to create this effect.

Simple note: This is not the first article I introduced to this technology, but I found that it was too complicated. There are many other textbooks on the internet, but there are a lot of extra code styles in it, it is necessary for the reader to distinguish what is needed, which is useless; This article avoids these problems and lists only the necessary CSS code that you can add to your favorite style to beautify the cards.

(Mouse over the image to see the flip effect)

Webhek
Crooked Neck Hacker@ Crooked Neck Hacker

Mozilla Web Developer, MooTools & jQuery consultant, MooTools Core Developer, Javascript fanatic, CSS tinkerer, PHP Ha Cker, and web lover.

HTML code

The HTML code that implements the positive and negative effects, it is estimated that you can also think of this:

<divClass="Flip-container"Ontouchstart="This.classList.toggle (' Hover‘);"><divClass="Flipper"><divClass="Front"><!--front Content--</div><div class = "Back "><!--back content-->< Span class= "token tag" ></div > </div></div>         

As you can imagine, there should be two containers, each storing the card "front" and "Back", through CSS, we will specify the role of the two container elements themselves. There is also a need to note that ontouchstart this JS, it allows you to use the touch screen to trigger the flip action. Obviously, you should extract the code separately and put the JavaScript code together.

CSS Code

I bet you'll be surprised that only so little code is needed (if you don't consider each browser css dialect prefix):

/* Entire container, keeps perspective */. Flip-container{Perspective: 1000;}/* Flip the pane when hovered */. flip-container:hover. Flipper,. Flip-container.hover. Flipper{Transform:Rotatey(180deg);}. Flip-container,. Front,. Back{Width: 320px;Height: 480px;}/* Flip speed goes here */. Flipper{Transition: 0.6s;Transform-style: preserve-3d;Position: Relative;}/* Hide back of pane during swap */. Front,. Back{Backface-visibility: Hidden;Position: Absolute;Top: 0; left: 0;} /* Front pane, placed above back */. Front {z-index: 2;} /* Back, initially hidden pane */. Back {transform: rotatey(180deg);}  

Here's how the whole process works:

• Sets the perspective (perspective) property of the entire animation area on the outermost container element.
• When the outer container element encounters a rollover event, the container that holds the card internally rotates 180 degrees. This is where the rotational speed is controlled. If the rotation value is set to -180deg, it is reversed rotation.
• Indicates that the elements on the front and back of the card must be absolutely positioned so that they can mask each other in the same position. Their back visibility (backface-visibility) properties are set to hidden so that the back of each card is invisible when flipped.
• Set the front of the card to a higher z-index value than the back, so that the front of the card is at the top.
• Rotate the back card 180 degrees, so that it plays the back role.

That's all the code works! You put this piece of code on your Web page, and then you can modify the style of the card!

Tips from the CSS animation expert Ana Tudor

Setting some specific values (like) on some properties of a card element overflow: hidden causes its child elements to lose 3D transform functionality. I agree with him because it is in the example of this article that I was in the middle of a overflow: hidden related problem, which led to the 3D transformation sub-elements all appearing on the same plane, several of which were rotated 180 degrees.

Trigger CSS Rollover

(Mouse over the image to see the flip effect)

Webhek
Crooked Neck Hacker@ Crooked Neck Hacker

Mozilla Web Developer, MooTools & jQuery consultant, MooTools Core Developer, Javascript fanatic, CSS tinkerer, PHP Ha Cker, and web lover.

Trigger Flip
If you like to use JavaScript to trigger flip actions, here's a simple CSS style class that can help you do this:

{transformrotatey(180deg);}     

Adding this CSS class to a container element using JavaScript will trigger the flip of the flip card--No need for the user to hover over the mouse. Use document.querySelector("#myCard").classList.toggle("flip") it to implement it!

CSS Vertical Rollover

(Mouse over the image to see the flip effect)

Webhek
Crooked Neck Hacker@ Crooked Neck Hacker

Mozilla Web Developer, MooTools & jQuery consultant, MooTools Core Developer, Javascript fanatic, CSS tinkerer, PHP Ha Cker, and web lover.

It's also simple to perform a vertical flip, just like a sideways flip, with only transform-origin a modified value and then rotate it by the x-axis.

. Vertical.flip-container{Position: Relative;}. Vertical. Back{Transform:rotatex (180deg}.vertical.flip-container. Flipper {transform-origin: 100% 213.5px< Span class= "token punctuation"; /* high half */}{transform< Span class= "token punctuation" >: rotatex ( -180deg< Span class= "token punctuation") ;}     

Note that this is used rotateX instead of the previous one rotateY .

Let IE support this animation technology

You need to make special changes to this standard card flip code for IE, because IE has not yet implemented the functionality in modern browsers transform . The basic approach is to flip the front and back two cards at the same time:

/* Entire container, keeps perspective */. Flip-container{Perspective: 1000;Transform-style: preserve-3d;}/* updated! Flip the pane when hovered */. Flip-container:hover. Back{Transform:Rotatey(0deg);}. Flip-container:hover. Front{Transform:Rotatey(180deg);}. Flip-container,. Front,. Back{Width: 320px;Height: 480px;}/* Flip speed goes here */. Flipper{Transition: 0.6s;Transform-style: preserve-3d;Position: Relative;}/* Hide back of pane during swap */. Front,. Back{Backface-visibility: Hidden;Transition: 0.6s;Transform-style: preserve-3d;Position: Absolute;Top: 0;Left: 0;}/* updated! Front pane, placed above back * *. Front{Z-index: 2;Transform:Rotatey(0deg);}/* Back, initially hidden pane */. back{Transform:Rotatey( -180deg);}/* Some Vertical Flip Updates */. Vertical.flip-container{Position: Relative;}. Vertical. Back{Transform:Rotatex (180deg;}.vertical.flip-container:hover. Back {transform: rotatex (0deg}.vertical.flip-container:hover. Front {transformrotatex             /span>         

Using the above code, the IE10 can also be the correct card flipping!

Basic effects before and after

This CSS card Flip animation technology has always been a classic case, representing the effect that CSS animations can achieve, even 3DCSS animation can achieve the powerful effect. The advantage is that the code used is rarely very simple. For the production of HTML5 animation This effect is very practical, can be said to be perfect. Can you think of any other places where this effect is used?

Address: http://www.webhek.com/css-flip/

CSS Picture Flip Animation technology detailed