CSS3 text 3D effect, css3 text 3d

CSS3 text 3D effect, css3 text 3d

The Code is as follows:

<! DOCTYPE html> 
The effect is as follows:


How to Use CSS3 to create a specific style of 3D effect text
Copy the Code as follows :. example-class {text-shadow: [X offset] [Y offset] [Blur size] [Colour];} Note: X indicates the displacement on the X axis and can be a negative value; Y indicates the displacement on the Y axis, which can be a negative value. Blur indicates the projection width, which cannot be a negative value. Color indicates the Projection Color. Stacked multi-layer CSS projection although we do not need to stack multi-layer projection, but through stacked multi-layer projection, there will be a better 3D effect to start creating 3D text. You may choose a color deeper than the text to use as the color of the projection, so in this example, I will use white text, use a deeper gray color as the projection color. In this example, I render the 3D effect of H2 text. The css code is as follows: copy the Code as follows: h2 {text-shadow: 1px 1px 0 # CCC, 2px 2px 0 # CCC,/* end of 2 level deep gray shadow */3px 3px 0 #444, 4px 4px 0 #444, 5px 5px 0 #444, 6px 6px 0 #444;/* end of 4 level deep dark shadow */} the effect is as follows: Well, you have created basic 3D text here, however, let's further expand the text that slides over the mouse, and use the transision attribute of css to achieve smooth fade-in and fade-out effects. First, use the transform attribute to zoom in and copy the code: h2: hover {/* CSS3 Transform Effect */-webkit-transform: scale (1.2 ); /* Safari & Chrome */-moz-transform: scale (1.2);/* Firefox */-o-transform: scale (1.2 ); /* Opera */}: Use the transition attribute to implement the fade-in and fade-out Effect. The Code is as follows: h2 {/* CSS3 Transition Effect */-webkit-transition: all 0.12 s outgoing-out;/* Safari & Chrome */-moz-transition: all 0.12 s outgoing-out;/* Firefox */-o-transition: all 0.12 S between-out;/* Opera */} Here, we use CSS3 to implement the 3D effect of the text, and when the mouse slides over, it enables the font to zoom in, and there is a fade-in and fade-out effect, all of which are implemented with pure CSS.

How to Use CSS3 to create 3D effects and text to implement style Solutions
Copy the Code as follows :. example-class {text-shadow: [X offset] [Y offset] [Blur size] [Colour];} Note: X indicates the displacement on the X axis and can be a negative value; Y indicates the displacement on the Y axis, which can be a negative value. Blur indicates the projection width, which cannot be a negative value. Color indicates the Projection Color.
Stacked multi-layer CSS projection
Although we do not need to stack multi-layer projection, it will have a better 3D effect through stack multi-layer projection.
Start creating 3D text
You may choose a color that is deeper than the text to use as the projection color, so in this example, I use white text and a little deeper gray as the projection color, in this example, I render the 3D effect of H2 text. The css code is as follows:
The copy code is as follows: h2 {text-shadow:
1px 1px 0 # CCC,
2px 2px 0 # CCC,/* end of 2 level deep gray shadow */
3px 3px 0 #444,
4px 4px 0 #444,
5px 5px 0 #444,
6px 6px 0 #444;/* end of 4 level deep dark shadow */} the effect is as follows: Well, you have created basic 3D text here. However, let's further implement the zoomed-in effect of text sliding over the mouse, and use the transision attribute of css to implement smooth fade-in and fade-out effects.
First, use the transform attribute to zoom in the font.
Copy the Code as follows: h2: hover {/* CSS3 Transform Effect */
-Webkit-transform: scale (1.2);/* Safari & Chrome */
-Moz-transform: scale (1.2);/* Firefox */
-O-transform: scale (1.2);/* Opera */}: Use the transition attribute to implement fade-in and fade-out.
Copy the Code as follows: h2 {/* CSS3 Transition Effect */
-Webkit-transition: all 0.12 s outgoing-out;/* Safari & Chrome */
-Moz-transition: all 0.12 s outgoing-out;/* Firefox */
-O-transition: all 0.12 s bytes-out;/* Opera */} Here, we use CSS3 to implement the 3D effect text, in addition, moving the mouse over enables font to zoom in and fade in and out, which is implemented with pure CSS.