Yesterday saw an interesting effect, idle to do a:

The 2 d static present, changed to 3 d, cathode and anode points to realize the rotation effect in two planes, the good implementation, the key is to achieve its transparent effect, plane taiji diagram shows that the poles are with the other block element block bottom color, but if the above the poles with effect of shade to achieve and cannot achieve transparent, Making the occluded block transparent will also show what the underside should look like, so this idea is wrong. Then you can only make the bottom surface itself transparent, but how can you achieve both transparency and this appearance? Gradient, and radial gradient is selected for the appearance of a circle.

Effect:

Road clear, start operation

A pole is divided into four pieces, a round head, belly, tail, and a separate circle.

The first one is round and transparent in the middle.

The second piece is attached to it, so I have to change it so that I don’t hide the circle in the middle of the first piece

Add a rounded corner to the top right to change it to a semicircle, add a radial gradient, change the origin to left-center and adjust the percentage of transparency.

The structure code of the anode is as follows:

<! Anode -- -- - >
 <main>
     <section></section>
     <section></section>
     <section></section>
     <section></section>
 </main>
Copy the code

The anode CSS code is as follows:

main{
	width:500px;
	height:500px;
	position:absolute;
	top:100px;
	left:500px;
	transform:rotateX(-20deg);
}

main section:nth-of-type(1) {width:250px;
	height:250px;
	position:absolute;
	bottom:0;
	right:0;
	border-bottom-right-radius:500px;
	background:radial-gradient(circle at 0% 50%,transparent 44.6%.# 284070 0%);
}
main section:nth-of-type(2) {width:250px;
	height:250px;
	position:absolute;
	top:0;
	right:0;
	border-top-right-radius:500px;
	background:radial-gradient(circle at 0% 50%,transparent 44.6%.# 284070 0%);
}
main section:nth-of-type(3) {width:250px;
	height:250px;
	position:absolute;
	top:0;
	left:125px;
	border-radius:50%;
	background:radial-gradient(circle at center,transparent 62.5 px..# 284070 0%);
}
main section:nth-of-type(4) {width:125px;
	height:125px;
	background:# 284070;
	position:absolute;
	bottom:62.5 px.;
	left:187.5 px.;
	border-radius:50%;

}
Copy the code

The effect picture of the anode is as follows:

The cathode structure code is as follows:

<! - the cathode - >
 <article>
     <aside></aside>
     <aside></aside>
     <aside></aside>
     <aside></aside>
 </article>
Copy the code

The cathode CSS code is as follows:

article{
	width:500px;
	height:500px;
	position:absolute;
	top:100px;
	left:500px;
	transform:rotateX(-20deg);
}

article aside:nth-of-type(1) {width:250px;
	height:250px;
	position:absolute;
	bottom:0;
	left:0;
	border-bottom-left-radius:500px;
	background:radial-gradient(circle at 100% 50%,transparent 44.6%.# 889090 0%);
}
article aside:nth-of-type(2) {width:250px;
	height:250px;
	position:absolute;
	top:0;
	left:0;
	border-top-left-radius:500px;
	background:radial-gradient(circle at 100% 50%,transparent 44.6%.# 889090 0%);
}
article aside:nth-of-type(3) {width:250px;
	height:250px;
	position:absolute;
	bottom:0;
	left:125px;
	border-radius:50%;
	background:radial-gradient(circle at center,transparent 62.5 px..# 889090 0%);
}
article aside:nth-of-type(4) {width:125px;
	height:125px;
	background:# 889090;
	position:absolute;
	top:62.5 px.;
	left:187.5 px.;
	border-radius:50%;

}
Copy the code

The cathode effect is as follows:

Anode and cathode effect picture:

The code for converting a 2D plane to 3D is as follows:

body{  transform-style:preserve-3d;  background:# 000;  perspective:1800px; }
Copy the code

Convert the 2D plane to 3D as follows:

Create animation keyframe and add animation property code:

Anode animation keyframe:

@keyframes mv1{
	0%{
	transform:rotateX(45deg) rotateY(30deg) rotateZ(0deg);
	}
	50%{
	transform:rotateX(45deg) rotateY(30deg) rotateZ(-180deg);
	}
	100%{
	transform:rotateX(45deg) rotateY(30deg) rotateZ(-360deg); }}Copy the code

Add the animation property code to the anode:

main{
	transform:rotateX(45deg) rotateY(30deg);
	animation:mv1 2.5 s linear infinite;
}
Copy the code

Cathode animation keyframe:

@keyframes mv2{
	0%{
	transform:rotateX(45deg) rotateY(-30deg) rotateZ(0deg);
	}
	50%{
	transform:rotateX(45deg) rotateY(-30deg) rotateZ(-180deg);
	}
	100%{
	transform:rotateX(45deg) rotateY(-30deg) rotateZ(-360deg); }}Copy the code

Add the animation property to the cathode:

article{
	transform:rotateX(45deg) rotateY(-30deg);
	animation:mv2 2.5 s linear infinite;
}
Copy the code

The final effect is as follows:

Done!

Conclusion:

The whole thing is not hard, the hard part is thinking about transparency and how to achieve it. Because you can’t use normal occlusion, you can only make yourself transparent. Follow this idea to the radial gradient and implement the effect. With the idea of the rest is the conventional knock.