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 of clear and blur to construct the parallax effect. Like this:

And in CSS, we can use the blur filter filter: blur() and transform-style: preserve -3d to 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 using transform-style: preserve-3d and perspective, and letting the text rotate around the Y axis.

The simple code is as follows:

<p>CSS3DEFFECT</p>

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:

##Achieve blurring of text

This effect already has a preliminary 3D effect, but just like this, you will feel that something is missing. Next, we need to add a blur effect to make the text closer to us clear and the text far away from us blurry.

But this requires detailed processing of each text. The above HTML structure cannot process each text individually. Let's simply transform the structure:

<p>
    <span>C</span>
    <span>S</span>
    <span>S</span>
    <span>3</span>
    <span>D</span>
    <span>E</span>
    <span>F</span>
    <span>F</span>
    <span>E</span>
    <span>C</span>
    <span>T</span>
</p>

Complete code It's probably like this:

@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);
    }
}

Under simple analysis, here are a few tips, carefully observe the effect we need:

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-child and :nth-last-child to 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-delay to delay half of the animation.
You can also use
3. text-shadow to make the text more three-dimensional

In this way, we can finally get the following effect:

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

Use blur to construct falling leaves effect

Using blur properly can create a falling leaf effect without the support of

transform-style: preserve-3d and perspective Nice 3D effect.

For example, the following falling leaf effect uses blur and simple hierarchical relationships to make the whole picture look very real:

<h2>Falling Leaves</h2>
<section>
  <div class="leaf">
    <div><img  src="落叶图片.png" / alt="Cleverly use filter and transform-style properties to create visual 3D effects" ></div>
    <div><img  src="落叶图片.png" / alt="Cleverly use filter and transform-style properties to create visual 3D effects" ></div>
    <div><img  src="落叶图片.png" / alt="Cleverly use filter and transform-style properties to create visual 3D effects" ></div>
    <div><img  src="落叶图片.png" / alt="Cleverly use filter and transform-style properties to create visual 3D effects" ></div>
    <div><img  src="落叶图片.png" / alt="Cleverly use filter and transform-style properties to create visual 3D effects" ></div>
    <div><img  src="落叶图片.png" / alt="Cleverly use filter and transform-style properties to create visual 3D effects" ></div>
    <div><img  src="落叶图片.png" / alt="Cleverly use filter and transform-style properties to create visual 3D effects" ></div>
  </div>
  <div class="leaf leaf2">
    // 重复第二组
  </div>
  <div class="leaf leaf3">
    // 重复第三组
  </div>
</section>

rrree

Mainly through

Clear and BlurryThe 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

Finally

Well, this article ends here, I hope it will be helpful to you:)

For more programming-related knowledge, please visit:

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!