Creative HTML5 text effects are similar to paging Effects

Previously, I saw a new HTML5 text special effect on the Internet. The text effect is that when the mouse slides over, It turns over and folds, similar to book flip. So I took a look at the source code with great interest and found that the implementation was quite simple. I used the transform attribute of CSS3 to flip the X axis, Y axis, and Z axis respectively, let's take a look at the effect.

Check whether these texts are stereoscopic. The stereoscopic feeling is not implemented by projection or shadow, but by flip.

DEMO

Next let's take a look at the source code. The first is the HTML code, which is very simple. It lists the text to be rendered:

A B C D E F G H I L M N O P Q R S T U V Z

The next step is the core CSS3 code. Here we skipped the CSS code that controls the page style and extracted the CSS code that implements the text of the page turning effect.

{:;:;:;:;:;:;:;:;:;}

In this way, we can arrange these letters quietly and have their own background colors, waiting for powerful CSS3 rendering.

Next, let's make the text slide over with the mouse to generate a flip tilt animation.

{:;:;:;:;:;}{:;}{:;:;:;:;}{:;:;:;}{:;:;} {:;}

Here we use the pseudo classes before and after of CSS3 to quickly construct two identical letters, and then use rotateX, rotateY, and rotateZ of the transform attribute to flip and use the text skew when skew is used.

Because things are relatively simple, they are all code, and there is no detailed explanation. please correct me if you have any questions.