Use distance, angle, light and shadow to create cool 3D text effects

How to use CSS to realize 3D figures? The following article will show you how to use visual blindness to create different 3D text effects. I hope it will be helpful to you!

There is an interesting question in the group recently. Everyone is discussing whether using CSS 3D can achieve the following effect:

The core difficulty here is how to use CSS to realize a three-dimensional number? Can CSS do it?

It is not particularly easy to achieve, but if we only use visual blindness within a certain angle, we can still perfectly restore the above effect.

Use distance, angle and light and shadow to construct different 3D effects

This is a very interesting technique. Of course, the production process requires more debugging.

Use distance, angle and light and shadow reasonably to create different 3D effects. Take a look at the example below, which simply sets up three layers of characters so that they are a certain distance apart on the Z axis. [Recommended learning: css video tutorial]

The simple pseudo code is as follows:

<div>
  <span class=&#39;C&#39;>C</span>
  <span class=&#39;S&#39;>S</span>
  <span class=&#39;S&#39;>S</span>
  <span></span>
  <span class=&#39;3&#39;>3</span>
  <span class=&#39;D&#39;>D</span>
</div>

$bright : #AFA695;
$gold : #867862;
$dark : #746853;
$duration : 10s;
div {
	perspective: 2000px;
	transform-style: preserve-3d;
	animation: fade $duration infinite;
}
span {
	transform-style: preserve-3d;
	transform: rotateY(25deg);
	animation: rotate $duration infinite ease-in;
	
	&:after, &:before {
		content: attr(class);
		color: $gold;
		z-index: -1;
		animation: shadow $duration infinite;
	}
	&:after{
		transform: translateZ(-16px);
	}
	&:before {
		transform: translateZ(-8px);
	}
}
@keyframes fade {
	// 透明度变化
}
@keyframes rotate {
	// 字体旋转
}
@keyframes shadow {
       // 字体颜色变化
}

A simple stroke, the core of the above code is:

• Parent element and child element settingstransform-style: preserve-3d

• Use two pseudo-elements of the span element Copy two identical words and use translateZ() to space them at a certain distance on the Z axis

• Add simple rotation, transparency, and font color changes

You can get such a title 3D animation similar to the opening of a movie. In fact, it only has 3 layers of elements, but due to the appropriate angles and perfect visual connection, it looks very 3D.

Why does it say that distance, angle, light and shadow need to be used reasonably?

It’s still the same animation effect. If the initial rotation angle of the animation is set slightly larger, the entire effect will be distorted:

As you can see, in In the first few frames, a simple layered structure can be seen. Or, simply adjust the perspective and set the perspective of the parent container from 2000px to 500px, and the effect will be more obvious:

In other words, at the right distance and right angle, we can create a relatively good 3D effect visually with only a few elements.

For the complete code above, you can click here: CSS inspiration--3D text appearance animation

Based on this technique, let’s simply transform it. Let’s first Replace the text effect:

<div>
  <span class=&#39;2&#39;>2</span>
  <span class=&#39;0&#39;>0</span>
  <span class=&#39;2&#39;>2</span>
  <span class=&#39;3&#39;>3</span>
</div>

In this way, we can get an effect like this:

Wow, it kind of means that. Next, we need to change to festive text effects. First, just look for a fireworks Gif on the Internet, maybe something like this:

We use background-clip: text to give three layers of text. With an effect similar to this, the core pseudocode is as follows:

span {
	position: relative;
	transform-style: preserve-3d;
	color: transparent;
	background: url(xxx.gif);
	background-clip: text;
	
	&:after, &:before {
		position: absolute;
		content: attr(class);
		color: transparent;
		background: url(xxx.gif);
	        background-clip: text;
	}
	
	&:before {
		transform: translateZ(-12px);
	}
	&:after {
		transform: translateZ(-6px);
	}
}

In this way, we get text with a firework effect, as well as a little 3D effect:

The last step is left, how to create the reflection effect?

There are many methods, the more convenient one is to use the webkit-box-reflect element. Only one line of code is needed:

div {
    //...
    -webkit-box-reflect: below -6vw linear-gradient(transparent 20%, rgba(255,255,255, .6));
}

Of course, if you are not satisfied with the visual thickness of the 3D text formed by the words generated by the two pseudo elements, you can also adjust the transform of the two pseudo elements simultaneously. : translateZ(-6px) value, after some adjustments, we simply reproduced the 2023 3D text animation effect as shown in the title picture:

For the complete code, you can click here:

##CodePen Demo -- CSS 3D 2023

Original address: https://juejin.cn/post/7184250130004967485

Author: ChokCoco

(Learning video sharing:

web front-end )

The above is the detailed content of Use distance, angle, light and shadow to create cool 3D text effects. For more information, please follow other related articles on the PHP Chinese website!