Cube

Developer
Gabi
Size
3,814 Kb
Views
36,432
  1. Cube Previews
  2. Cube HTML Codes
  3. Cube CSS Codes
  4. Cube JS Codes

How do I make an cube?

A CSS 3D cube built with canvases. Inspired by Nate Wiley's Particle Cube. What is a cube? How do you make a cube? This script and codes were developed by Gabi on 22 August 2022, Monday.

Cube Previews
IQ Test

Cube - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cube</title> <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 { height: 100%;
}
body { background: radial-gradient(#2aa4d5, #030633); overflow: hidden; perspective: 500px;
}
.cube { bottom: 0; height: 150px; left: 0; margin: auto; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; right: 0; top: 0; width: 150px; /*opacity: .75;*/ animation: rotate 10s linear infinite;
}
.face { height: 100%; left: 0; position: absolute; top: 0; width: 100%;
}
.cvs{border:1px solid #444;}
.back {}
.left { transform: translateX(-150px) rotateY(-90deg); transform-origin: right center;
}
.right { transform: translateX(150px) rotateY(90deg); transform-origin: left center;
}
.top { transform: translateY(-150px) rotateX(90deg); transform-origin: bottom center;
}
.bottom { transform: translateY(150px) rotateX(-90deg); transform-origin: center top;
}
.front { transform: translateY(450px) translateZ(-150px) rotateX(180deg); transform-origin: center -150px;
}
@-webkit-keyframes rotate { 0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) } 100% { transform: rotateY(360deg) rotateX(360deg) rotateZ(720deg) }
}
@keyframes rotate { 0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) } 100% { transform: rotateY(360deg) rotateX(360deg) rotateZ(720deg) }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="cube"> <div class="face back"><canvas class = 'cvs'></canvas></div> <div class="face left"><canvas class = 'cvs'></canvas></div> <div class="face right"><canvas class = 'cvs'></canvas></div> <div class="face top"><canvas class = 'cvs'></canvas></div> <div class="face bottom"><canvas class = 'cvs'></canvas></div> <div class="face front"><canvas class = 'cvs'></canvas></div>
</div> <script src='js/vlqxyo.js'></script> <script src="js/index.js"></script>
</body>
</html>

Cube - Script Codes CSS Codes

html,
body { height: 100%;
}
body { background: radial-gradient(#2aa4d5, #030633); overflow: hidden; perspective: 500px;
}
.cube { bottom: 0; height: 150px; left: 0; margin: auto; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; right: 0; top: 0; width: 150px; /*opacity: .75;*/ animation: rotate 10s linear infinite;
}
.face { height: 100%; left: 0; position: absolute; top: 0; width: 100%;
}
.cvs{border:1px solid #444;}
.back {}
.left { transform: translateX(-150px) rotateY(-90deg); transform-origin: right center;
}
.right { transform: translateX(150px) rotateY(90deg); transform-origin: left center;
}
.top { transform: translateY(-150px) rotateX(90deg); transform-origin: bottom center;
}
.bottom { transform: translateY(150px) rotateX(-90deg); transform-origin: center top;
}
.front { transform: translateY(450px) translateZ(-150px) rotateX(180deg); transform-origin: center -150px;
}
@-webkit-keyframes rotate { 0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) } 100% { transform: rotateY(360deg) rotateX(360deg) rotateZ(720deg) }
}
@keyframes rotate { 0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) } 100% { transform: rotateY(360deg) rotateX(360deg) rotateZ(720deg) }
}

Cube - Script Codes JS Codes

var cc = document.querySelectorAll(".cvs");
var cctx = [];
for (var i = 0; i < cc.length; i++) { cctx[i] = cc[i].getContext("2d"); console.log(cctx[i]) cc[i].width = 150; cc[i].height = 150; cctx[i].fillStyle = "rgba(0,0,40,.1)";
}
var c = document.createElement("canvas");
var ctx = c.getContext("2d");
var cw = c.width = 150;
var ch = c.height = 150;
var cx = cw / 2, cy = ch / 2;
var rad = Math.PI / 180;
var frames = 0;
var Ry = [];
var R = 20;
var A = 1.5, A1;
var B = 1;
var K = 3;
var rotation = 0;
ctx.lineWidth = 2;
function buildRy(rotation, A1) { for (var a = 0; a < 360; a += 3) { var o = {} o.r = A * R + B * R * Math.sin(K * (a + rotation) * rad); o.x = cx + o.r * Math.cos(a * rad); o.y = cy + o.r * Math.sin(a * rad); o.r1 = A1 * R + B * R * Math.cos(K * (a - rotation / 3) * rad); o.x1 = cx + o.r1 * Math.cos(a * rad); o.y1 = cy + o.r1 * Math.sin(a * rad); o.color = "hsl(" + a + ", 100%,50%)"; Ry.push(o); }
}
function Draw() { Ry.length = 0; rotation++; A1 = A * Math.sin(rotation * rad); buildRy(rotation, A1); ctx.clearRect(0, 0, cw, ch); for (var i = 0; i < Ry.length; i += 6) { var o = Ry[i]; ctx.strokeStyle = o.color; ctx.beginPath(); ctx.strokeRect(o.x, o.y, 3, 3); ctx.stroke(); ctx.beginPath(); ctx.strokeRect(o.x1, o.y1, 2, 2); } requestId = window.requestAnimationFrame(Draw); var img = c; for (var i = 0; i < cctx.length; i++) { cctx[i].fillRect(0, 0, cw, ch); cctx[i].drawImage(img, 0, 0); }
}
requestId = window.requestAnimationFrame(Draw);
Cube - Script Codes
Cube - Script Codes
Home Page Home
Developer Gabi
Username enxaneta
Uploaded August 22, 2022
Rating 4.5
Size 3,814 Kb
Views 36,432
Do you need developer help for Cube?

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!

Gabi (enxaneta) Script Codes
Name
Fat worm
Animated SVG Turbulence Filter
Circular trail
Sine wave ice cream
Some flowers
Sphere Within Sphere
Sea Creature
Intersecting Lines
Sakura
Conical Helix
Create amazing love letters 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!