Cleverly use filter and transform-style properties to create visual 3D effects

This article will introduce the techniques of using blur to achieve visual 3D effects, and see how to use filter and transform-style attributes to achieve visual 3D effects. I hope it will be helpful to everyone!

We all know that in normal visual effects, the closer we are to us, the clearer we usually see it, while the farther away from us is relatively less clear~

We can use the two states ofclearandblurto construct the parallax effect. Like this:

And in CSS, we can use the blur filterfilter: blur()andtransform-style: preserve -3dto implement them.

Implementing the 3D transformation of a text

First, we need to implement the 3D transformation of a text, which is relatively simple. Mainly by usingtransform-style: preserve-3dandperspective, and letting the text rotate around the Y axis.

The simple code is as follows:

CSS3DEFFECT

body { perspective: 160vmin; } p { font-size: 24vmin; transform-style: preserve-3d; animation: rotate 10s infinite ease-in-out; } @keyframes rotate { 0% { transform: rotateY(-45deg); } 50% { transform: rotateY(45deg); } 100% { transform: rotateY(-45deg); } }

We can get such a 3D text effect:

 C S S 3 D E F F E C T 

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); $count: 12; body, html { font-family: 'Lobster', cursive; perspective: 160vmin; overflow: hidden; } p { margin: auto; font-size: 24vmin; transform-style: preserve-3d; animation: rotate 10s infinite ease-in-out; span { text-shadow: 1px 1px 0 rgba(0, 0, 0, .9), 2px 2px 0 rgba(0, 0, 0, .7), 3px 3px 0 rgba(0, 0, 0, .5), 4px 4px 0 rgba(0, 0, 0, .3), 5px 5px 0 rgba(0, 0, 0, .1); &:nth-child(-n+5) { animation-delay: -5s; } } } @for $i from 1 to 7 { span:nth-child(#{$i}), span:nth-last-child(#{$i}) { animation: filterBlur-#{$i} 10s infinite ease-in-out; } @keyframes filterBlur-#{$i} { 0% { filter: blur(0px) contrast(5); } 50% { filter: blur(#{7 - $i}px) contrast(1); } 100% { filter: blur(0px) contrast(5); } } } @keyframes rotate { 0% { transform: rotateY(-45deg); } 50% { transform: rotateY(45deg); } 100% { transform: rotateY(-45deg); } }

The first character and the last character are at the end of the rotation. The left effect and the rightmost effect will be the closest and farthest to us respectively. Their effects should actually be the same, so the first character and the last character should be processed uniformly, and so on, the second character and the penultimate character Unified processing, here you can use SASS to use
1. :nth-childand:nth-last-childto write CSS code efficiently
Half of it is clear and half is clear every time are blurry and need to be treated differently. Use
2. animation-delayto delay half of the animation.
You can also use
3. text-shadowto make the text more three-dimensional

For the complete code, you can click here--CSS inspiration--Use filter:blur enhances the 3D effect of text

https://csscoco.com/inspiration/#/./filter/use-filter-blur-enhance-text-3d-effect

transform-style: preserve-3dandperspectiveNice 3D effect.

Falling Leaves
 
 
 
 
 
 
 
 
 
 
 
 // 重复第二组 
 
 // 重复第三组 
 

ClearandBlurryThe contrast between the two states and the difference in speed are used to create a parallax effect.

CodePen Demo -- Falling leaves

https://codepen.io/Chokcoco/pen/vYyGVZZ

Programming Video! !

The above is the detailed content of Cleverly use filter and transform-style properties to create visual 3D effects. For more information, please follow other related articles on the PHP Chinese website!