In this short article, we will introduce some techniques for achieving visual 3D effects with blur.

We all know that in normal visual effects, things that are closer to us tend to be clearer, and things that are farther away tend to be less clear

We can construct parallax effects using both clear and fuzzy states. Something like this:

In CSS, we can implement them using filter: Blur () and transform-style: preserve-3D.

Achieve a text 3D transformation

First, we need to implement a 3D transformation of the text, which is relatively easy. Use transform-style: preserve-3D and perspective, and rotate the text around the Y-axis.

The simple code is as follows:

<p>CSS3DEFFECT</p>
Copy the code
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); }}Copy the code

We get a 3D text that looks like this:

Achieve text ambiguity

This effect already has a preliminary 3D effect, but just like this, it feels like something is missing. Next we need to add a blur effect, make the text close to us clear, away from our text blurred.

But in this way, each text needs to be refined. The above HTML structure cannot be processed individually for each text. Let’s simply change 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>
Copy the code

The complete code looks something 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); }}Copy the code

For a quick breakdown, here are a few tips to get a closer look at what we want:

  1. First character and effect of the last character in the rotation of the left and the right under the effect of our nearest and farthest respectively, their effects in fact should be consistent, so the first character and the last character should be unified treatment, so on, the second character and the penultimate character unified handling, here can use SASS:nth-child 和 :nth-last-childWrite CSS code efficiently
  2. Each time half is clear, half is vague, need to be treated differently, useanimation-delayLet half of the animation be delayed and half done
  3. You can match it againtext-shadowMake the text more three-dimensional

In this way, we can end up with the following effect:

For the complete code, you can poke here – CSS inspiration – and use Filter: Blur to enhance the 3D effect of text

Use blur to create the fall foliage effect

The proper use of ambiguity can build a good 3D effect without the support of transform-style: preserve-3D and perspective.

I saw the following effect in a video teaching website on Youtube, which makes the whole picture look very real by using blur and simple hierarchy:

<h2>Falling Leaves</h2>
<section>
  <div class="leaf">
    <div><img src="Picture of fallen leaves. PNG" /></div>
    <div><img src="Picture of fallen leaves. PNG" /></div>
    <div><img src="Picture of fallen leaves. PNG" /></div>
    <div><img src="Picture of fallen leaves. PNG" /></div>
    <div><img src="Picture of fallen leaves. PNG" /></div>
    <div><img src="Picture of fallen leaves. PNG" /></div>
    <div><img src="Picture of fallen leaves. PNG" /></div>
  </div>
  <div class="leaf leaf2">// Repeat the second group</div>
  <div class="leaf leaf3">// Repeat group 3</div>
</section>
Copy the code
.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); }}Copy the code

Mainly through the contrast of clear and fuzzy two states, the difference in speed, to build parallax effect.

CodePen Demo — Falling leaves

The last

Well, the end of this article, I hope to help you 🙂

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More wonderful CSS effects can follow my CSS inspiration

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.