Clever use of blur to achieve visual 3D effects

This article will introduce the skill of using blur to achieve visual 3D effect.

We all know that in normal visual effects, the closer we are, the clearer we will see, while the farther away we are, the less clear it is.

We can use clear and blur two states to construct the parallax effect. Like this:

In CSS, we can use blur filters filter: blur() and transform-style: preserve-3d to achieve them.

Realize the 3D transformation of a text

First, we need to implement a text 3D transformation, which is relatively simple. Mainly with the help of transform-style: preserve-3d and perspective , and let 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 text blur

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

But this requires refined processing of each text. The above HTML structure cannot handle each text individually. Let's simply modify 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>

The complete code looks 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 a simple analysis, here are a few tips to carefully observe the effects we need:

1. The first character and the last character will be the closest and the farthest to us under the rotating leftmost effect and the rightmost effect respectively. Their effects should actually be the same, so the first and last characters should be processed uniformly. By analogy, the second character and the penultimate character are processed uniformly. Here, you can use SASS to use :nth-child and :nth-last-child efficiently write CSS code.
2. Every time half of the animation is clear and half is blurred, it needs to be treated differently. Use animation-delay to delay half of the animation and half of it.
3. Can be text-shadow make the text more three-dimensional

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

For the complete code, you can here - 1613188bff3a67 CSS inspiration - Use filter:blur to enhance the 3D effect of text

Use blur to build a falling leaf effect

The proper use of blur can build a good 3D effect transform-style: preserve-3d and perspective

For example, the following falling leaves 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" /></div>
    <div><img src="落叶图片.png" /></div>
    <div><img src="落叶图片.png" /></div>
    <div><img src="落叶图片.png" /></div>
    <div><img src="落叶图片.png" /></div>
    <div><img src="落叶图片.png" /></div>
    <div><img src="落叶图片.png" /></div>
  </div>
  <div class="leaf leaf2">
    // 重复第二组
  </div>
  <div class="leaf leaf3">
    // 重复第三组
  </div>
</section>

.leaf {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.leaf img {
  width: 75px;
  height: 75px;
}
.leaf div:nth-child(1) {
  left: 20%;
  animation: fall 22s linear infinite;
  animation-delay: -2s;
}
.leaf div:nth-child(2) {
  left: 70%;
  animation: fall 18s linear infinite;
  animation-delay: -4s;
}
.leaf div:nth-child(3) {
  left: 10%;
  animation: fall 21s linear infinite;
  animation-delay: -7s;
}
.leaf div:nth-child(4) {
  left: 50%;
  animation: fall 24s linear infinite;
  animation-delay: -5s;
}
.leaf div:nth-child(5) {
  left: 85%;
  animation: fall 19s linear infinite;
  animation-delay: -5s;
}
.leaf div:nth-child(6) {
  left: 15%;
  animation: fall 23s linear infinite;
  animation-delay: -10s;
}
.leaf div:nth-child(7) {
  left: 90%;
  animation: fall 20s linear infinite;
  animation-delay: -4s;
}
.leaf2 {
  transform: scale(1.6) translate(5%, -5%) rotate(15deg);
  filter: blur(1px);
  z-index: 10;
}
.leaf3 {
  filter: blur(2px);
  transform: scale(0.8) translate(-5%, 10%) rotate(170deg);
}
@keyframes fall {
  0% {
    top: -30%;
    transform: translateX(20px) rotate(0deg);
  }
  20% {
    transform: translateX(-20px) rotate(45deg);
  }
  40% {
    transform: translateX(20px) rotate(90deg);
  }
  60% {
    transform: translateX(-20px) rotate(135deg);
  }
  80% {
    transform: translateX(20px) rotate(180deg);
  }
  100% {
    top: 150%;
    transform: translateX(-20px) rotate(225deg);
  }
}

Mainly by clear and Fuzzy comparison of the two states, the difference in speed, to construct a parallax effect.

CodePen Demo -- Falling leaves

finally

Okay, this concludes this article, I hope it helps you :)

Want to get the most interesting CSS information, don’t miss my account - 1613188bff3c65 iCSS front-end facts 1613188bff3c68 😄

For more exciting CSS effects, please pay attention to my CSS inspiration

More wonderful CSS technical articles are summarized in my Github - iCSS , which will be updated continuously. Welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can exchange more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.