Cube thingy

Developer
Teo Dragovic
Size
3,988 Kb
Views
4,048
  1. Cube thingy Previews
  2. Cube thingy HTML Codes
  3. Cube thingy CSS Codes
  4. Cube thingy JS Codes

How do I make an cube thingy?

Rotate cube using arrow keys. What is a cube thingy? How do you make a cube thingy? This script and codes were developed by Teo Dragovic on 05 January 2023, Thursday.

Cube thingy Previews
IQ Test

Cube thingy - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cube thingy</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! */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html { height: 100%;
}
body { background-image: radial-gradient(#333333, #1a1a1a); overflow: hidden; height: 100%; font-family: sans-serif;
}
.container { position: relative; margin: 100px auto; width: 200px; height: 200px; perspective: 1000px;
}
.cube { position: absolute; width: 100%; height: 100%; transition: transform 1s; transform-style: preserve-3d;
}
.cube .side { position: absolute; display: block; width: 100%; height: 100%; backface-visibility: hidden; box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.2);
}
.cube .side.blue { background-image: radial-gradient(#4a5096, #393e74);
}
.cube .side.pink { background-image: radial-gradient(#944a67, #72394f);
}
.cube .side.aqua { background-image: radial-gradient(#4a8994, #396a72);
}
.cube .side.green { background-image: radial-gradient(#4a944c, #39723b);
}
.cube .side.orange { background-image: radial-gradient(#94764a, #725b39);
}
.cube .side.red { background-image: radial-gradient(#944a4a, #723939);
}
.cube .side.front { transform: rotateX(0deg) translateZ(100px);
}
.cube .side.back { transform: rotateX(180deg) translateZ(100px);
}
.cube .side.right { transform: rotateY(90deg) translateZ(100px);
}
.cube .side.left { transform: rotateY(-90deg) translateZ(100px);
}
.cube .side.top { transform: rotateX(90deg) translateZ(100px);
}
.cube .side.bottom { transform: rotateX(-90deg) translateZ(100px);
}
p { width: 100%; color: #555; text-align: center; line-height: 1.5;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <div id="cube" class="cube"> <div class="side blue front"></div> <div class="side pink back"></div> <div class="side aqua right"></div> <div class="side green left"></div> <div class="side orange top"></div> <div class="side red bottom"></div> </div>
</div>
<p>rotate cube using arrow keys<p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Cube thingy - Script Codes CSS Codes

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html { height: 100%;
}
body { background-image: radial-gradient(#333333, #1a1a1a); overflow: hidden; height: 100%; font-family: sans-serif;
}
.container { position: relative; margin: 100px auto; width: 200px; height: 200px; perspective: 1000px;
}
.cube { position: absolute; width: 100%; height: 100%; transition: transform 1s; transform-style: preserve-3d;
}
.cube .side { position: absolute; display: block; width: 100%; height: 100%; backface-visibility: hidden; box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.2);
}
.cube .side.blue { background-image: radial-gradient(#4a5096, #393e74);
}
.cube .side.pink { background-image: radial-gradient(#944a67, #72394f);
}
.cube .side.aqua { background-image: radial-gradient(#4a8994, #396a72);
}
.cube .side.green { background-image: radial-gradient(#4a944c, #39723b);
}
.cube .side.orange { background-image: radial-gradient(#94764a, #725b39);
}
.cube .side.red { background-image: radial-gradient(#944a4a, #723939);
}
.cube .side.front { transform: rotateX(0deg) translateZ(100px);
}
.cube .side.back { transform: rotateX(180deg) translateZ(100px);
}
.cube .side.right { transform: rotateY(90deg) translateZ(100px);
}
.cube .side.left { transform: rotateY(-90deg) translateZ(100px);
}
.cube .side.top { transform: rotateX(90deg) translateZ(100px);
}
.cube .side.bottom { transform: rotateX(-90deg) translateZ(100px);
}
p { width: 100%; color: #555; text-align: center; line-height: 1.5;
}

Cube thingy - Script Codes JS Codes

var xAngle = 0, yAngle = 0, zAngle = 0, cube = $("#cube");
$(document).keydown(function(e) { //keyup maybe better? e.preventDefault(); var key = e.which, arrow = {left: 37, up: 38, right: 39, down: 40}, x = xAngle/90, y = yAngle/90; switch(key) { case arrow.left: if (x%2 == 0) yAngle -= 90; else zAngle += 90; break; case arrow.up: if (y%2 == 0) xAngle += 90; else zAngle -= 90; break; case arrow.right: if (x%2 == 0) yAngle += 90; else zAngle -=90; break; case arrow.down: if (y%2 == 0) xAngle -= 90; else zAngle += 90; break; } var rotate = "rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg) rotateZ(" + zAngle + "deg)"; cube.css({"transform":rotate});
});
/*
Reference material:
https://desandro.github.io/3dtransforms/docs/cube.html
http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/
https://blog.joelambert.co.uk/2011/05/10/handling-3d-geometry-with-3d-css3-transforms/
+ CSS-Tricks and Stack Overflow for random shit
*/
Cube thingy - Script Codes
Cube thingy - Script Codes
Home Page Home
Developer Teo Dragovic
Username teodragovic
Uploaded January 05, 2023
Rating 3
Size 3,988 Kb
Views 4,048
Do you need developer help for Cube thingy?

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!

Teo Dragovic (teodragovic) Script Codes
Name
Sticky sidebar thingy
Origami boat
Client logo done in css
Galaxy sky thingy
Dice
Knob thingy
3D letter thingy
Responsive nav with submenus
A Pen by Teo Dragovic
Page load thingy
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!