HTML5 page effect text effects how to implement it

HTML5 Page effect text effects how to implement it, before the online to see a more innovative HTML5 text effects, text effect is when the mouse is sliding over the effect of folding, similar to the book page. So I was very excited about the point of open source code to see a bit, found that the implementation is also quite simple, the main use of the CSS3 transform properties, respectively, the x-axis, y-axis, z-axis to flip, first look at the effect.

Look at these words is not very three-dimensional feeling, and this stereoscopic feeling is not with the projection and shadow to achieve, but by flipping.        

Next we look at the source code. The first is the HTML code, very simple, listing the text we need to render:

2. <div class= "foo" >
   

4. <span class= "letter" data-letter= "A" >A</span>
   

6. <span class= "letter" data-letter= "B" >B</span>
   

8. <span class= "letter" data-letter= "C" >C</span>
   

10. <span class= "letter" data-letter= "D" >D</span>
    

12. <span class= "letter" data-letter= "E" >E</span>
    

14. <span class= "letter" data-letter= "F" >F</span>
    

16. <span class= "letter" data-letter= "G" >G</span>
    

18. <span class= "letter" data-letter= "H" >H</span>
    

20. <span class= "letter" data-letter= "I" >I</span>
    

22. <span class= "letter" data-letter= "L" >L</span>
    

24. <span class= "letter" data-letter= "M" >M</span>
    

26. <span class= "letter" data-letter= "N" >N</span>
    

28. <span class= "letter" data-letter= "O" >O</span>
    

30. <span class= "letter" data-letter= "P" >P</span>
    

32. <span class= "letter" data-letter= "Q" >Q</span>
    

34. <span class= "letter" data-letter= "R" >R</span>
    

36. <span class= "letter" data-letter= "S" >S</span>
    

38. <span class= "letter" data-letter= "T" >T</span>
    

40. <span class= "letter" data-letter= "U" >U</span>
    

42. <span class= "letter" data-letter= "V" >V</span>
    

44. <span class= "letter" data-letter= "Z" >Z</span>
    

46. </div>

Copy Code

         
       Next is the core CSS3 code, where we omit the CSS code that controls the page style and extract the CSS code that implements the flip-out text.

1. . letter{
   

2. Display:inline-block;
   

3. font-weight:900;
   

4. Font-size:8em;
   

5. Margin:0.2em;
   

6. position:relative;
   

7. Color: #00B4F1;
   

8. transform-style:preserve-3d;
   

9. perspective:400;
   

10. Z-index:1;
    

11. }

Copy Code

So we let these letters in a quiet arrangement, and have their own background color, waiting for the powerful CSS3 to render.

Next we want the text to be flipped over the mouse to produce a flip-tilt animation.

2. . Letter:before,. letter:after{
   

4. Position:absolute;
   

6. Content:attr (Data-letter);
   

8. Transform-origin:top left;
   

10. top:0;
    

12. left:0;
    

14. }
    

16. . Letter,. Letter:before,. letter:after{
    

18. Transition:all 0.3s ease-in-out;
    

20. }
    

22. . letter:before{
    

24. Color: #fff;
    

26. Text-shadow:
    

28. -1px 0px 1px rgba (255,255,255,.8),
    

30. 1px 0px 1px rgba (0,0,0,.8);
    

32. Z-index:3;
    

34. Transform
    

36. Rotatex (0DEG)
    

38. Rotatey ( -15DEG)
    

40. Rotatez (0DEG);
    

42. }
    

44. . letter:after{
    

46. Color:rgba (0,0,0,.11);
    

48. Z-index:2;
    

50. Transform
    

52. Scale (1.08,1)
    

54. Rotatex (0DEG)
    

56. Rotatey (0DEG)
    

58. Rotatez (0DEG)
    

60. Skew (0DEG,1DEG);
    

62. }
    

64. . letter:hover:before{
    

66. Color: #fafafa;
    

68. Transform
    

70. Rotatex (0DEG)
    

72. Rotatey ( -40DEG)
    

74. Rotatez (0DEG);
    

76. }
    

78. . letter:hover:after{
    

80. Transform
    

82. Scale (1.08,1)
    

84. Rotatex (0DEG)
    

86. Rotatey (40DEG)
    

88. Rotatez (0DEG)
    

90. Skew (0DEG,22DEG);
    

92. }
    

94. 
    

96. Copy Code

Copy Code

Here we use CSS3 's pseudo-class before and after to quickly construct two identical letters, then flip through the Rotatex,rotatey,rotatez of the Transform property, and then use the skew to skew the text.

Article Source: There is a recruit network reprint please indicate the source article link: http://www.youjobit.com/news_108.html