Simple text effects for HTML5 paging-

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, mainly using the transform attribute of CSS3, respectively on the X axis ...,. Simple text effects for HTML5 Paging

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.

  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.

.letter{  display: inline-block;  font-weight: 900;  font-size: 8em;  margin: 0.2em;  position: relative;  color: #00B4F1;  transform-style: preserve-3d;  perspective: 400;  z-index: 1;}

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. (#00b4f1 what is the color? #00b4f1 is blue)

.letter:before, .letter:after{  position:absolute;  content: attr(data-letter);  transform-origin: top left;  top:0;  left:0;}.letter, .letter:before, .letter:after{  transition: all 0.3s ease-in-out;}.letter:before{  color: #fff;  text-shadow:     -1px 0px 1px rgba(255,255,255,.8),    1px 0px 1px rgba(0,0,0,.8);  z-index: 3;  transform:    rotateX(0deg)    rotateY(-15deg)    rotateZ(0deg);}.letter:after{  color: rgba(0,0,0,.11);  z-index:2;  transform:    scale(1.08,1)    rotateX(0deg)    rotateY(0deg)    rotateZ(0deg)    skew(0deg,1deg);}.letter:hover:before{  color: #fafafa;  transform:    rotateX(0deg)    rotateY(-40deg)    rotateZ(0deg);}.letter:hover:after{  transform:    scale(1.08,1)    rotateX(0deg)    rotateY(40deg)    rotateZ(0deg)    skew(0deg,22deg);}

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.

The above is a simple HTML 5 paging effect text effect content, more relevant content, please follow the PHP Chinese Network (www.php1.cn )!

Related Articles:

Common CSS flip Effects

Sample Code for css to implement 3D cube Rotation effects

Describes in detail how to implement the special effects of HTML5 3D clothing swing animation.