80s Retro spinning cube

Developer
Hugo DarbyBrown
Size
3,011 Kb
Views
50,600
  1. 80s Retro spinning cube Previews
  2. 80s Retro spinning cube HTML Codes
  3. 80s Retro spinning cube CSS Codes

How do I make an 80s retro spinning cube?

Keeping on the 80s retro vibe. What is a 80s retro spinning cube? How do you make a 80s retro spinning cube? This script and codes were developed by Hugo DarbyBrown on 09 August 2022, Tuesday.

80s Retro spinning cube Previews
IQ Test

80s Retro spinning cube - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>80s Retro spinning cube</title> <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> <cube> <back></back> <bottom></bottom> <front></front> <left></left> <right></right> <top></top>
</cube> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

80s Retro spinning cube - Script Codes CSS Codes

* { box-sizing: border-box;
}
html { background: -webkit-radial-gradient(center ellipse, #430d6d 0%, #000000 100%); background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%); height: 100%;
}
body { height: 20em; left: 50%; margin-left: -10em; margin-top: -10em; -webkit-perspective: 1000px; perspective: 1000px; position: absolute; top: 50%; width: 20em;
}
cube { -webkit-animation: 6s spin linear infinite; animation: 6s spin linear infinite; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; width: 100%;
}
cube * { background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px); background-size: 2.5em 2.5em, 2.5em 2.5em; background-color: rgba(0, 0, 0, 0.5); border: 2px solid rgba(54, 226, 248, 0.5); box-shadow: 0 0 5em rgba(0, 128, 0, 0.4); display: block; height: 20em; position: absolute; width: 20em;
}
cube *:before { background: -webkit-radial-gradient(center ellipse, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%); content: ''; height: 100%; position: absolute; width: 100%;
}
back { -webkit-transform: rotateX(180deg) translateZ(10em); transform: rotateX(180deg) translateZ(10em);
}
bottom { -webkit-transform: rotateX(-90deg) translateZ(10em); transform: rotateX(-90deg) translateZ(10em);
}
front { -webkit-transform: rotateY(0deg) translateZ(10em); transform: rotateY(0deg) translateZ(10em);
}
left { -webkit-transform: rotateY(-90deg) translateZ(10em); transform: rotateY(-90deg) translateZ(10em);
}
right { -webkit-transform: rotateY(90deg) translateZ(10em); transform: rotateY(90deg) translateZ(10em);
}
top { -webkit-transform: rotateX(90deg) translateZ(10em); transform: rotateX(90deg) translateZ(10em);
}
@-webkit-keyframes background { to { background-size: 20em 20em, 20em 20em; }
}
@keyframes background { to { background-size: 20em 20em, 20em 20em; }
}
@-webkit-keyframes spin { from { -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg); transform: translateZ(-10em) rotateX(0) rotateY(0deg); } to { -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); }
}
@keyframes spin { from { -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg); transform: translateZ(-10em) rotateX(0) rotateY(0deg); } to { -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); transform: translateZ(-10em) rotateX(360deg) rotateY(360deg); }
}
80s Retro spinning cube - Script Codes
80s Retro spinning cube - Script Codes
Home Page Home
Developer Hugo DarbyBrown
Username hugo
Uploaded August 09, 2022
Rating 4.5
Size 3,011 Kb
Views 50,600
Do you need developer help for 80s Retro spinning 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!

Hugo DarbyBrown (hugo) Script Codes
Name
Trello style subtle rotate for sortable items
Roll Over Social Buttons
DNA Double Helix
Mixer MKII
CSS Sublime Text Logo
Greyscale Magnifying glass effect
Shade - Shadow Mixin
Social-Media Card
Shop Talk logo made in CSS
YAUI v2
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!