3D Coin Animation with CSS

In this example below you will see how to do a 3D Coin Animation with CSS with some HTML / CSS and Javascript

This is an example of DivSugar, a CSS-based 3D graphics library.DivSugar: https://github.com/kitao/divsugar

Thumbnail
This awesome code was written by kitao, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright kitao ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>3D Coin Animation with CSS</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
  <script src='https://rawgithub.com/kitao/divsugar/master/build/divsugar.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/kitao/3d-coin-animation-with-css-KiGyw */
body { margin: 0px; }

/*Downloaded from https://www.codeseek.co/kitao/3d-coin-animation-with-css-KiGyw */
'use strict';

// create a scene
var scn = new DivSugar.Scene().setSize(800, 600).setImage('https://github.com/kitao/divsugar/raw/master/examples/assets/sunset.jpg').appendTo(document.body);

// maximize the scene size
function resize() { scn.adjustLayout(window.innerWidth, window.innerHeight, 'cover'); }
window.addEventListener('resize', resize, true);
resize();

// define an animation class which inherits the task class
function Coin() {
  // call the base class's constructor
  this.constructor.uber.constructor();

  this.vec = new DivSugar.Vector();
  this.pos = new DivSugar.Vector(Math.random() * 800, 900, Math.random() * 800 - 1000);
  this.vel = new DivSugar.Vector(Math.random() * 6 - 3, Math.random() * 8 - 20, Math.random() * 6 - 3);
  this.rot = new DivSugar.Vector(Math.random() * 0.1, Math.random() * 0.1, Math.random() * 0.1);

  this.center = new DivSugar.Node().setPosition(this.pos)
    .rotate(Math.random() * 360, Math.random() * 360, Math.random() * 360).appendTo(scn);

  this.front = new DivSugar.Node().setSize(200, 200).setPosition(-100, -100, 0).setBackface(false)
    .setImage('https://github.com/kitao/divsugar/raw/master/examples/assets/coin.png').setImageClip(0, 0, 0.5, 1).appendTo(this.center);

  this.back = new DivSugar.Node().setSize(200, 200).setPosition(100, -100, 0).setBackface(false)
    .setImage('https://github.com/kitao/divsugar/raw/master/examples/assets/coin.png').setImageClip(0.5, 0, 1, 1).rotate(0, 180, 0).appendTo(this.center);
}

DivSugar.inherit(Coin, DivSugar.Task);

Coin.prototype.onUpdate = function() {
  this.vel.y += this.deltaTime * 0.01;
  this.pos.add(this.vec.set(this.vel).mul(this.deltaTime * 0.06));
  this.center.setPosition(this.pos).rotate(this.deltaTime * this.rot.x, this.deltaTime * this.rot.y, this.deltaTime * this.rot.z);

  // when fall enough, destroy this task and create an another task
  if (this.pos.y > 1000) {
    this.destroy();
    new Coin().appendTo(DivSugar.rootTask);
  }
};

Coin.prototype.onDestroy = function() { scn.remove(this.center); };

// create and register instances of the animation class
for (var i = 0; i < 30; i++) { new Coin().appendTo(DivSugar.rootTask); }

Comments