How to Generate & Use 3D SHAPES For Free On Elementor | Super Designer

In this tutorial you will learn how to Generate and use 3D Shapes For free on Elementor no Graphics design knowledge needed, You will learn how to animate them on your website using some lines or CSS codes
Resources Used:
superdesigner.co/tools/3d-shapes
Other Vides:
How to Easily Create And Use BLOB On Your Elementor Website | No Design Skills Needed • How to Easily Create A...
Elementor Overlapping Cards and Parallax Effect on Scroll - No Code - No Plugin | Tips & Tricks • Elementor Overlapping ...
Elementor Text Hover Effect to Reveal Container Section | No Code - No Addon Plugin (Tips & Tricks) • Elementor Text Hover E...
#elementortutorial #wordpresstutorial #tutorial #elementorpagebuilder #webdesign

[@thecreativarena]

Copy and Paste the Code Below
/* Animation classes */
/* updown = for up and down movement */
/* roundabout = for round and about movement */
/* rolling = for rolling animation effect */
/* squaremove = for a four corner square like movement */
.updown {
width: auto;
animation: shapeani1 3s linear infinite;
}
@keyframes shapeani1 {
0% {
transform: translateY(15px);
}
50% {
transform: translateY(-15px);
}
100% {
transform: translateY(15px);
}
}
.roundabout {
animation: linear 20s shapeani2 infinite;
}
@keyframes shapeani2 {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
20% {
transform: translate(73px, -1px) rotate(36deg);
}
40% {
transform: translate(141px, 72px) rotate(72deg);
}
60% {
transform: translate(83px, 122px) rotate(108deg);
}
80% {
transform: translate(-40px, 72px) rotate(144deg);
}
100% {
transform: translate(0px, 0px) rotate(0deg);
}
}
.rolling {
animation: linear 20s shapeani3 infinite;
}
@keyframes shapeani3 {
0% {
transform: translate(-300px, 151px) rotate(0deg);
}
100% {
transform: translate(251px, -200px) rotate(180deg);
}
}
.squaremove{
animation: linear 20s shapeani4 infinite;
}
@keyframes shapeani4 {
0% {
transform: translate(61px, -99px) rotate(0deg);
}
21% {
transform: translate(4px, -190px) rotate(38deg);
}
41% {
transform: translate(-139px, -200px) rotate(74deg);
}
60% {
transform: translate(-263px, -164px) rotate(108deg);
}
80% {
transform: translate(-195px, -49px) rotate(144deg);
}
100% {
transform: translate(-1px, 0px) rotate(180deg);
}
}

[@GbengaSaviour]

Thank you so much

[@AbuchiOkafor-pk2hi]

I appreciate you for this tutoriall

[@GinaOdiba]

Wow this is really helpful