Faceful Cubes

Developer
Aaron Levine
Size
3,721 Kb
Views
2,024
  1. Faceful Cubes Previews
  2. Faceful Cubes HTML Codes
  3. Faceful Cubes CSS Codes
  4. Faceful Cubes JS Codes

How do I make an faceful cubes?

Works best in Chrome (actually, kind of only works in Chrome). What is a faceful cubes? How do you make a faceful cubes? This script and codes were developed by Aaron Levine on 30 January 2023, Monday.

Faceful Cubes Previews
IQ Test

Faceful Cubes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Faceful Cubes</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container"></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>

Faceful Cubes - Script Codes CSS Codes

#container { position: absolute; top: 50%; left: 50%; margin-left: -50vmin; margin-top: -50vmin; display: inline-block; width: 100vmin; height: 100vmin;
}
.cube { position: relative; display: inline-block; width: 5vmin; height: 5vmin; padding: 0; margin: 2.5vmin; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-perspective: 500px; -moz-perspective: 500px; perspective: 500px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d;
}
.cube .back { box-sizing: border-box; position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; padding: 0; margin: 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; background: red; background: #f00;
}
.cube .front { box-sizing: border-box; position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; padding: 0; margin: 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; background: red; -webkit-transform: translateZ(-5vmin); -moz-transform: translateZ(-5vmin); -ms-transform: translateZ(-5vmin); -o-transform: translateZ(-5vmin); transform: translateZ(-5vmin); background: black;
}
.cube .left { box-sizing: border-box; position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; padding: 0; margin: 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; background: red; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); background: maroon;
}
.cube .right { box-sizing: border-box; position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; padding: 0; margin: 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; background: red; -webkit-transform: translateX(5vmin) rotateY(90deg); -moz-transform: translateX(5vmin) rotateY(90deg); -ms-transform: translateX(5vmin) rotateY(90deg); -o-transform: translateX(5vmin) rotateY(90deg); transform: translateX(5vmin) rotateY(90deg); background: #4d0000;
}
.cube .top { box-sizing: border-box; position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; padding: 0; margin: 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; background: red; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); background: #660000;
}
.cube .bottom { box-sizing: border-box; position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; padding: 0; margin: 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; background: red; -webkit-transform: translateY(5vmin) rotateX(-90deg); -moz-transform: translateY(5vmin) rotateX(-90deg); -ms-transform: translateY(5vmin) rotateX(-90deg); -o-transform: translateY(5vmin) rotateX(-90deg); transform: translateY(5vmin) rotateX(-90deg); background: #330000;
}
html, body { width: 100%; height: 100%; padding: 0; overflow: hidden; font-size: 0; background: #000;
}

Faceful Cubes - Script Codes JS Codes

var App = {};
App.unit = 'vmin';
App.container;
App.width;
App.height;
App.mouseX;
App.mouseY;
App.cubes = [];
App.Cube = function(color){ this.color = color; this.gfx;
}
App.Cube.prototype.Render = function(){ var cube = document.createElement('div'); cube.className = 'cube'; var faces = ['front', 'back', 'left', 'right', 'top', 'bottom']; faces.forEach(function(className){ var face = document.createElement('div'); face.className = className; cube.appendChild(face); }); App.container.appendChild(cube); this.gfx = cube;
}
App.Cube.prototype.FacePoint = function(x, y){ var cube = this.gfx; var rect = cube.getBoundingClientRect(); var posX = rect.left + (rect.width / 2); var posY = rect.top + (rect.height / 2); var difX = posX - x; var difY = posY - y; var distance = Math.sqrt( Math.pow(difX, 2) + Math.pow(difY, 2) ); var dirX = difX / distance; var dirY =difY / distance; var contSize = App.container.getBoundingClientRect().width; var deg = Math.max(-90, Math.min(90, (distance / contSize) * 90)); var transforms = ['-webkit-transform', '-moz-transform', '-o-transform', 'transform']; transforms.forEach(function(trans){ cube.style[trans] = 'rotate3d('+dirY+','+(-dirX)+',0,'+deg+'deg)'; });
}
App.Init = function(){ var container = App.container = document.querySelector('#container'); App.width = 100; App.height = 100;
}
App.InitCubes = function(){ for(var i=0; i<100; i++){ var cube = new App.Cube(); cube.Render(); App.cubes.push(cube); }
}
App.InitMouse = function(){ document.addEventListener('mousemove', function(e){ var x = e.clientX; var y = e.clientY; App.FaceCubes(x, y); }); document.addEventListener('touchmove', function(e){ var x = e.touches[0].clientX; var y = e.touches[0].clientY; e.returnValue = false; if(typeof e.preventDefault == 'function') e.preventDefault(); App.FaceCubes(x, y); }); App.FaceCubes(window.innerWidth/2, window.innerHeight/2);
}
App.FaceCubes = function(x, y){ App.cubes.forEach(function(cube){ cube.FacePoint(x, y); });
}
App.Main = function(){ App.Init(); App.InitCubes(); App.InitMouse();
}
App.Main();
Faceful Cubes - Script Codes
Faceful Cubes - Script Codes
Home Page Home
Developer Aaron Levine
Username Aldlevine
Uploaded January 30, 2023
Rating 3
Size 3,721 Kb
Views 2,024
Do you need developer help for Faceful Cubes?

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!

Aaron Levine (Aldlevine) Script Codes
Name
Colored Rain
Blowout Menu
CRT TV Page Load Animation
Random Gradients - JS
Pure CSS Rating Scale
Progress
Mobile App Design
Flashy Rating Page
Price is Right Wheel - Better Inertia
Kaskade 0.3 - Desktop Demo
Create amazing captions 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!