Dynamic Spinning Cubes

Developer
Izzy Skye
Size
3,293 Kb
Views
12,144
  1. Dynamic Spinning Cubes Previews
  2. Dynamic Spinning Cubes HTML Codes
  3. Dynamic Spinning Cubes CSS Codes
  4. Dynamic Spinning Cubes JS Codes

How do I make an dynamic spinning cubes?

Dynamically creates cubes with how many cubes you want in an arrangement while spinning.. What is a dynamic spinning cubes? How do you make a dynamic spinning cubes? This script and codes were developed by Izzy Skye on 27 October 2022, Thursday.

Dynamic Spinning Cubes Previews
IQ Test

Dynamic Spinning Cubes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dynamic Spinning Cubes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,700italic,400italic' rel='stylesheet' type='text/css'>
</head>
<div id="cubeField"> <div class="cubes"> <div class="cubeMaster"> <div class="cube"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div>
</div>
<div class="inputDerp"> <div class="text" id="thingy"> Enter a square number </div> <input type="text" class="input" /> <div id="buttons"> <div class="text button" id="enter"> Submit </div> <div class="text button" id="clear"> Clear </div> </div>
</div>
<div id="info" class="text"> Compatible with all browsers except for 3d on IE and Maxthon
</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>

Dynamic Spinning Cubes - Script Codes CSS Codes

@-webkit-keyframes spin
{ 100% { -webkit-transform: rotateX(360deg)rotateZ(360deg); }
}
@-moz-keyframes spin
{ 100% { -moz-transform: rotateX(360deg)rotateZ(360deg); }
}
@-ms-keyframes spin
{ 100% { -ms-transform: rotateX(360deg)rotateZ(360deg); }
}
@keyframes spin
{ 100% { transform: rotateX(360deg)rotateZ(360deg); }
}
@-webkit-keyframes spin2
{ 100% { -webkit-transform: rotateZ(360deg); }
}
@-moz-keyframes spin2
{ 100% { -moz-transform: rotateZ(360deg); }
}
@-ms-keyframes spin2
{ 100% { -ms-transform: rotateZ(360deg); }
}
@keyframes spin2
{ 100% { transform: rotateZ(360deg); }
}
#cubeField { position: absolute; margin: 65px 0 0 365px; }
.cubes { -webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); transform: rotateZ(45deg); /*-webkit-animation: spin2 1s linear infinite; -moz-animation: spin2 1s linear infinite; -ms-animation: spin2 1s linear infinite; animation: spin2 1s linear infinite;*/ }
.cubeMaster { position: relative; float: left; margin: 10px; height: 50px; width: 50px; -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: center center; -moz-perspective-origin: center center; -ms-perspective-origin: center center; perspective-origin: center center; -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; -ms-animation: spin 1s linear infinite; animation: spin 1s linear infinite; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; }
.cube { -webkit-transform: rotateX(30deg) rotateY(45deg); -moz-transform: rotateX(30deg) rotateY(45deg); -ms-transform: rotateX(30deg) rotateY(45deg); transform: rotateX(30deg) rotateY(45deg); position: relative; height: 50px; width: 50px; -webkit-transition: -webkit-transform 2s linear; -moz-transition: -webkit-transform 2s linear; -ms-transition: -webkit-transform 2s linear; transition: -webkit-transform 2s linear; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; }
.cube>div { position: absolute; height: 50px; width: 50px; opacity: 0.9; background-position:center center; }
.cube div:nth-child(1) { -webkit-transform: translateZ(25px); -moz-transform: translateZ(25px); -ms-transform: translateZ(25px); transform: translateZ(25px); background-color: #000; }
.cube div:nth-child(2) { -webkit-transform: rotateY(90deg) translateZ(25px); -moz-transform: rotateY(90deg) translateZ(25px); -ms-transform: rotateY(90deg) translateZ(25px); transform: rotateY(90deg) translateZ(25px); background-color: #222; }
.cube div:nth-child(3) { -webkit-transform: rotateY(180deg) translateZ(25px); -moz-transform: rotateY(180deg) translateZ(25px); -ms-transform: rotateY(180deg) translateZ(25px); transform: rotateY(180deg) translateZ(25px); background-color: #444; }
.cube div:nth-child(4) { -webkit-transform: rotateY(270deg) translateZ(25px); -moz-transform: rotateY(270deg) translateZ(25px); -ms-transform: rotateY(270deg) translateZ(25px); transform: rotateY(270deg) translateZ(25px); background-color: #666; }
.cube div:nth-child(5) { -webkit-transform: rotateX(90deg) translateZ(25px); -moz-transform: rotateX(90deg) translateZ(25px); -ms-transform: rotateX(90deg) translateZ(25px); transform: rotateX(90deg) translateZ(25px); background-color: #888; }
.cube div:nth-child(6) { -webkit-transform: rotateX(270deg) translateZ(25px); -moz-transform: rotateX(270deg) translateZ(25px); -ms-transform: rotateX(270deg) translateZ(25px); transform: rotateX(270deg) translateZ(25px); background-color: #AAA; }
#errorMessage { position: absolute; margin: 200px 0 0 37px; text-align: center; font-size: 25px; padding: 20px; width: 140px; background: #555; }
.inputDerp { position: absolute; padding: 15px; }
.input { position: relative; box-shadow: 0 0 5px #333, 0 0 5px #333, 0 0 5px #333 inset; border: 1px solid #555; margin: 20px 0 15px 23px; width: 175px; height: 30px; text-align: center; font-family: 'Droid Serif', serif; font-size: 21px; }
.input:focus { background: #BBB; }
#buttons { margin: 4px 0 0 44px; }
.button { position: relative; float: left; margin: 0 0 0 10px; width: 35px; }
.button:hover { cursor: pointer; }
#thingy { margin: 0 0 0 -10px; padding: 10px; width: 221px; box-shadow: 0 0 4px #BBB inset, 0 5px 15px #BBB inset, 0 -5px 15px #333 inset, 0 0 5px #222; border-radius: 2%; font-size: 20px; }
.text { position: relative; padding: 5px; background: #666; text-shadow: 0 0 10px #333; box-shadow: 0 0 4px #BBB inset, 0 5px 10px #EEE inset, 0 -5px 10px #444 inset, 0 0 5px #222; border-radius: 10%; font-family: 'Droid Serif', serif; font-size: 14px; color: #EEE; }
#enter { width: 49px; }
#clear { width: 37px; }
#info { position: absolute; width: 150px; margin: 200px 0 0 47px; box-shadow: 0 0 4px #BBB inset, 0 5px 15px #BBB inset, 0 -5px 15px #333 inset, 0 0 5px #222; border-radius: 2%; }

Dynamic Spinning Cubes - Script Codes JS Codes

$(document).ready(function (){ var cubeMaster = '<div class="cubeMaster"><div class="cube"><div></div><div></div><div></div><div></div><div></div><div></div></div></div>'; $('#enter').click(function(){ populate(); }); $('.input').keypress(function(e){ if(e.which == 13) { populate(); } }); $('#clear').click(function(){ clear(); }); function clear() { $('#info').show(); var cubesNumber = $('.input').val(); var cubesNumberSqrt = Math.sqrt(cubesNumber); var cubesNumberMarginY = 65+(23*cubesNumberSqrt); $('.cubes').empty(); $('#errorMessage').remove(); $('.cubes').append(cubeMaster); } function populate(){ clear(); $('#info').hide(); var cubesNumber = $('.input').val(); var cubesNumberSqrt = Math.sqrt(cubesNumber); var cubesNumberMarginY = 65+(23*cubesNumberSqrt); var fieldWidth = 140+(69*(cubesNumberSqrt-1)); if((cubesNumberSqrt % 1) === 0) { $('#cubeField').width(fieldWidth); $('#cubeField').css ( { 'margin-top':cubesNumberMarginY } ); for (var i = 1; i < cubesNumber; i++) { $('.cubes').append(cubeMaster); } } else { $('body').append('<div id="errorMessage" class="text">Not a square number</div>'); } }
});
Dynamic Spinning Cubes - Script Codes
Dynamic Spinning Cubes - Script Codes
Home Page Home
Developer Izzy Skye
Username zephyr
Uploaded October 27, 2022
Rating 3
Size 3,293 Kb
Views 12,144
Do you need developer help for Dynamic Spinning 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!

Izzy Skye (zephyr) Script Codes
Name
Audio Player
Pure CSS Spinning Cube
Pure CSS Arrow Collection
Pure CSS Down Arrow
Pure CSS Inanimate Cube Field
Vanilla JS Pattern Locker
Pure CSS Read More Arrow
Responsive Menu Concept
Unisolated Pure CSS Mobile Nav Spinner
JQuery Slider
Create amazing art & images 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!