CSS3 3D Particles

Developer
Timo Hausmann
Size
2,859 Kb
Views
32,384
  1. CSS3 3D Particles Previews
  2. CSS3 3D Particles HTML Codes
  3. CSS3 3D Particles CSS Codes
  4. CSS3 3D Particles JS Codes

How do I make an css3 3d particles?

New particle divs are constantly created via JS. The animation happens via CSS: transitioning the particles to random transform values.. What is a css3 3d particles? How do you make a css3 3d particles? This script and codes were developed by Timo Hausmann on 16 October 2022, Sunday.

CSS3 3D Particles Previews
IQ Test

CSS3 3D Particles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 3D Particles</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html,
body,
#scene { width: 100%; height: 100%;
}
body { background: black;
}
#scene { perspective: 150px; /* the lower this is, the fancier it gets */
}
#emitter { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; animation: rotate 4s infinite linear;
}
.particle { position: absolute; width: 10px; height: 10px; background: white; border-radius: 20%; transition: 1s ease-in;
}
@keyframes rotate { 0% { transform: rotateY(0) rotateZ(-180deg); } 100% { transform: rotateY(360deg) rotateZ(180deg); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="scene"> <div id="emitter"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS3 3D Particles - Script Codes CSS Codes

html,
body,
#scene { width: 100%; height: 100%;
}
body { background: black;
}
#scene { perspective: 150px; /* the lower this is, the fancier it gets */
}
#emitter { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; animation: rotate 4s infinite linear;
}
.particle { position: absolute; width: 10px; height: 10px; background: white; border-radius: 20%; transition: 1s ease-in;
}
@keyframes rotate { 0% { transform: rotateY(0) rotateZ(-180deg); } 100% { transform: rotateY(360deg) rotateZ(180deg); }
}

CSS3 3D Particles - Script Codes JS Codes

var $emitter = $('#emitter'), emitEvery = 50, //emit new particle every X ms removeAfter = 1000; //remove particles after X ms
function create() { //create particle and random values var $particle = $('<div class="particle" />'), x = Math.randMinMax(-200, 200), y = Math.randMinMax(-200, 50), z = Math.randMinMax(-200, 200), degree = Math.randMinMax(0, 360), color = 'hsla(' + Math.randMinMax(200, 320) + ', 80%, 60%, 1)'; //append particle to dom $particle.css('background', color); $emitter.append( $particle ); //after a short timeout, set css to be transitioned to. Without the timeout, we would not see the transition window.setTimeout(function() { $particle.css({ webkitTransform: 'translateX(' + x + 'px) translateY(' + y + 'px) translateZ(' + z + 'px) rotateX(' + degree + 'deg)', opacity: 0 }); }, 50); //remove current particle after time window.setTimeout(function() { $particle.remove(); }, removeAfter); //create next particle window.setTimeout(create, emitEvery);
}
//https://gist.github.com/timohausmann/4997906
Math.randMinMax=function(t,n,a){var r=t+Math.random()*(n-t)
return a&&(r=Math.round(r)),r}
//execute first particle creation
create();
CSS3 3D Particles - Script Codes
CSS3 3D Particles - Script Codes
Home Page Home
Developer Timo Hausmann
Username timohausmann
Uploaded October 16, 2022
Rating 4.5
Size 2,859 Kb
Views 32,384
Do you need developer help for CSS3 3D Particles?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Timo Hausmann (timohausmann) Script Codes
Name
Tunnel Quest
Simple CSS 3D Cubes
Vector Based Movement
Tekken Particles
Spring Physics
Valentines Day
Particle Button
Depth First Search Maze
Use your mousewheel
Color Wheel. Literally.
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!