Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use filter and transform-style attributes to create visual 3D effects". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's ideas to study and learn "how to create visual 3D effects with filter and transform-style attributes".

We all know that in normal visual effects, we usually see more clearly when we are closer to us, but less clearly when we are farther away.

We can use clear and blurred states to build parallax effects. Like this:

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

Realize the 3D transformation of a text

First of all, we need to implement a 3D transformation of text, 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:

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 a 3D text effect like this:

Realize the vagueness of the text

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

But this requires fine processing of each text. The above HTML structure cannot handle each text separately. Let's simply modify the structure:

C S S 3 D E F F E C T

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,0.9), 2px 2px 0rgba (0,0,0,0.7), 3px 3px 0rgba (0,0,0,0.5), 4px 4px 0rgba (0,0,0,0.3), 5px 5px 0rgba (0,0,0,.1). &: nth-child (- animation-delay 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);}}

For a brief analysis, here are a few tips to take a closer look at the effects we need:

The first character and the last character will be closest and farthest from us under the leftmost and rightmost effect of rotation, respectively, and their effects should be the same, so the first character and the last character should be treated together, and so on, the second character and the penultimate character should be treated together, here we can use SASS to write CSS code efficiently using: nth-child and: nth-last-child.

Each time, half of the animation is clear and half is blurred. It needs to be treated differently, and half of the animation is delayed by using animation-delay.

You can cooperate with text-shadow to make the text more three-dimensional.

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

Complete code, you can poke here-- CSS inspiration-- use filter:blur to enhance the 3D effect of text.

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

Use blur to build the effect of falling leaves

Reasonable use of blur can create a good 3D effect without the blessing of transform-style: preserve-3d and perspective.

For example, the following effect of falling leaves is to use fuzzy and simple hierarchical relationships to make the whole picture look very real:

Falling Leaves

/ / repeat the second group / / repeat the third group .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);}}

The main purpose of this paper is to construct the parallax effect through the comparison of the two states of clarity and blur and the difference of speed.

Thank you for your reading, the above is "how to use filter and transform-style attributes to create visual 3D effects" content, after the study of this article, I believe you on how to use filter and transform-style attributes to create visual 3D effects of this problem has a deeper understanding, the specific use of the need for you to practice verification. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.