Pure CSS Inanimate Cube Field

Developer
Izzy Skye
Size
2,255 Kb
Views
46,552
  1. Pure CSS Inanimate Cube Field Previews
  2. Pure CSS Inanimate Cube Field HTML Codes
  3. Pure CSS Inanimate Cube Field CSS Codes
  4. Pure CSS Inanimate Cube Field JS Codes

How do I make an pure css inanimate cube field?

Just an experiment.. What is a pure css inanimate cube field? How do you make a pure css inanimate cube field? This script and codes were developed by Izzy Skye on 27 October 2022, Thursday.

Pure CSS Inanimate Cube Field Previews
IQ Test

Pure CSS Inanimate Cube Field - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Inanimate Cube Field</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="cubeField1"> <div class="row1"> <div class="cube1" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube2" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube3" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube4" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube5" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div> <div class="row2"> <div class="cube1" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube2" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube3" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube4" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube5" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div> <div class="row3"> <div class="cube1" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube2" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube3" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube4" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube5" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div> <div class="row4"> <div class="cube1" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube2" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube3" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube4" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube5" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div> <div class="row5"> <div class="cube1" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube2" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube3" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube4" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="cube5" class="cubeMaster"> <div class="cube" class="animate"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pure CSS Inanimate Cube Field - Script Codes CSS Codes

/* moves entire field */
.cubeField1 { position: absolute; margin: 50px 0 0 350px; -webkit-transform: rotateZ(45deg); }
/* governs position of rows */
.row1 { position: absolute; margin: 10px 0 0 0; }
.row2 { position: absolute; margin: 80px 0 0 0; }
.row3 { position: absolute; margin: 150px 0 0 0; }
.row4 { position: absolute; margin: 220px 0 0 0; }
.row5 { position: absolute; margin: 290px 0 0 0; }
/* governs positions of cubes */
.cube1 { position: absolute; margin: 0 0 0 10px; }
.cube2 { position: absolute; margin: 0 0 0 80px; }
.cube3 { position: absolute; margin: 0 0 0 150px; }
.cube4 { position: absolute; margin: 0 0 0 220px; }
.cube5 { position: absolute; margin: 0 0 0 290px; }
.cubeMaster { height: 50px; width: 50px; -webkit-perspective: 1000px; -webkit-perspective-origin: center center; }
.cube { -webkit-transform: rotateX(30deg) rotateY(45deg); position: relative; height: 50px; width: 50px; -webkit-transition: -webkit-transform 2s linear; -webkit-transform-style: preserve-3d; }
.cube>div { position: absolute; height: 50px; width: 50px; opacity: 0.9; }
.cube div:nth-child(1) { -webkit-transform: translateZ(25px); background-color: #000; }
.cube div:nth-child(2) { -webkit-transform: rotateY(90deg) translateZ(25px); background-color: #222; }
.cube div:nth-child(3) { -webkit-transform: rotateY(180deg) translateZ(25px); background-color: #444; }
.cube div:nth-child(4) { -webkit-transform: rotateY(270deg) translateZ(25px); background-color: #666; }
.cube div:nth-child(5) { -webkit-transform: rotateX(90deg) translateZ(25px); background-color: #888; }
.cube div:nth-child(6) { -webkit-transform: rotateX(270deg) translateZ(25px); background-color: #AAA; }

Pure CSS Inanimate Cube Field - Script Codes JS Codes

//cubes
// here for an updated one with interactiveness and spinniness + some js https://codepen.io/zephyr/pen/brdHc
Pure CSS Inanimate Cube Field - Script Codes
Pure CSS Inanimate Cube Field - Script Codes
Home Page Home
Developer Izzy Skye
Username zephyr
Uploaded October 27, 2022
Rating 3
Size 2,255 Kb
Views 46,552
Do you need developer help for Pure CSS Inanimate Cube Field?

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
Unisolated Pure CSS Mobile Nav Spinner
JQuery Slider
Pure CSS Dropdown Button
Aperture Science style loading
Responsive Menu Concept
Mobile Material Menu Style
Audio Player
Pure CSS Loader
Tab Menus
Pure CSS Down Arrow
Create amazing web content 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!