Cubes

Developer

Size

3,469 Kb

Views

14,168

Cubes Previews
Cubes HTML Codes
Cubes CSS Codes
Cubes JS Codes

How do I make an cubes?

A gif by Florian de Looij recreated in pure css — http://flrn.nl/gifs/. What is a cubes? How do you make a cubes? This script and codes were developed by Jon Ambas on 17 October 2022, Monday.

Cubes Previews

Cubes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cubes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="layer bottom"> <div class="cube nw"></div> <div class="cube w"></div> <div class="cube n"></div> <div class="cube ne"></div> <div class="cube "></div> <div class="cube sw"></div> <div class="cube s"></div> <div class="cube e"></div> <div class="cube se"></div>	</div>	<div class="layer">	<div class="cube nw"></div> <div class="cube w"></div>	<div class="cube n"></div>	<div class="cube ne"></div> <div class="cube "></div> <div class="cube sw"></div> <div class="cube s"></div> <div class="cube e"></div> <div class="cube se"></div>	</div>	<div class="layer top"> <div class="cube nw"></div> <div class="cube w"></div> <div class="cube n"></div> <div class="cube ne"></div> <div class="cube "></div> <div class="cube sw"></div> <div class="cube s"></div> <div class="cube e"></div> <div class="cube se"></div>	</div> <script src="js/index.js"></script>
</body>
</html>

Cubes - Script Codes CSS Codes

.layer { position: absolute; width: 100%; height: 100%;
}
.layer.top { -webkit-animation: 3.7s top cubic-bezier(0.645, 0.045, 0.355, 1) infinite; animation: 3.7s top cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
.layer.bottom { -webkit-animation: 3.7s bottom cubic-bezier(0.645, 0.045, 0.355, 1) infinite; animation: 3.7s bottom cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
.n { -webkit-animation: 3.7s "n" cubic-bezier(0.645, 0.045, 0.355, 1) infinite; animation: 3.7s "n" cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
@-webkit-keyframes n { 0%, 83.33%, 100% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, -79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, -79px); } 16.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, -79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, -79px); } 33.33%, 50% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, -158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, -158px); } 66.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, -158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, -158px); }
}
@keyframes n { 0%, 83.33%, 100% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, -79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, -79px); } 16.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, -79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, -79px); } 33.33%, 50% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, -158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, -158px); } 66.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, -158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, -158px); }
}
.s { -webkit-animation: 3.7s "s" cubic-bezier(0.645, 0.045, 0.355, 1) infinite; animation: 3.7s "s" cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
@-webkit-keyframes s { 0%, 83.33%, 100% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 79px); } 16.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 79px); } 33.33%, 50% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 158px); } 66.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 158px); }
}
@keyframes s { 0%, 83.33%, 100% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 79px); } 16.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 79px); } 33.33%, 50% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 158px); } 66.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 158px); }
}
.e { -webkit-animation: 3.7s "e" cubic-bezier(0.645, 0.045, 0.355, 1) infinite; animation: 3.7s "e" cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
@-webkit-keyframes e { 0%, 83.33%, 100% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, 0); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, 0); } 16.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, 0); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, 0); } 33.33%, 50% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, 0); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, 0); } 66.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, 0); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, 0); }
}
@keyframes e { 0%, 83.33%, 100% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, 0); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, 0); } 16.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, 0); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, 0); } 33.33%, 50% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, 0); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, 0); } 66.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, 0); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, 0); }
}
.w { -webkit-animation: 3.7s "w" cubic-bezier(0.645, 0.045, 0.355, 1) infinite; animation: 3.7s "w" cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
@-webkit-keyframes w { 0%, 83.33%, 100% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 0); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 0); } 16.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 0); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 0); } 33.33%, 50% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 0); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 0); } 66.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 0); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 0); }
}
@keyframes w { 0%, 83.33%, 100% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 0); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 0); } 16.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 0); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 0); } 33.33%, 50% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 0); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 0); } 66.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 0); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 0); }
}
.ne { -webkit-animation: 3.7s "ne" cubic-bezier(0.645, 0.045, 0.355, 1) infinite; animation: 3.7s "ne" cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
@-webkit-keyframes ne { 0%, 83.33%, 100% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, -79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, -79px); } 16.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(237px, -79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(237px, -79px); } 33.33%, 50% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(316px, -158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(316px, -158px); } 66.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(237px, -158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(237px, -158px); }
}
@keyframes ne { 0%, 83.33%, 100% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, -79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(158px, -79px); } 16.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(237px, -79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(237px, -79px); } 33.33%, 50% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(316px, -158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(316px, -158px); } 66.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(237px, -158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(237px, -158px); }
}
.se { -webkit-animation: 3.7s "se" cubic-bezier(0.645, 0.045, 0.355, 1) infinite; animation: 3.7s "se" cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
@-webkit-keyframes se { 0%, 83.33%, 100% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(0, 79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(0, 79px); } 16.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, 79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, 79px); } 33.33%, 50% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(0px, 158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(0px, 158px); } 66.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 158px); }
}
@keyframes se { 0%, 83.33%, 100% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(0, 79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(0, 79px); } 16.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, 79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, 79px); } 33.33%, 50% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(0px, 158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(0px, 158px); } 66.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, 158px); }
}
.sw { -webkit-animation: 3.7s "sw" cubic-bezier(0.645, 0.045, 0.355, 1) infinite; animation: 3.7s "sw" cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
@-webkit-keyframes sw { 0%, 83.33%, 100% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 79px); } 16.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-237px, 79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-237px, 79px); } 33.33%, 50% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-316px, 158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-316px, 158px); } 66.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-237px, 158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-237px, 158px); }
}
@keyframes sw { 0%, 83.33%, 100% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-158px, 79px); } 16.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-237px, 79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-237px, 79px); } 33.33%, 50% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-316px, 158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-316px, 158px); } 66.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-237px, 158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-237px, 158px); }
}
.nw { -webkit-animation: 3.7s "nw" cubic-bezier(0.645, 0.045, 0.355, 1) infinite; animation: 3.7s "nw" cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
@-webkit-keyframes nw { 0%, 83.33%, 100% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(0px, -79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(0px, -79px); } 16.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, -79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, -79px); } 33.33%, 50% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(0px, -158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(0px, -158px); } 66.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, -158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, -158px); }
}
@keyframes nw { 0%, 83.33%, 100% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(0px, -79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(0px, -79px); } 16.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, -79px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(-79px, -79px); } 33.33%, 50% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(0px, -158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(0px, -158px); } 66.66% { -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, -158px); transform: matrix(0.9, 0.5, 0, 1, 0, 0) translate(79px, -158px); }
}
.cube { position: absolute; top: 45%; left: 45%; width: 80px; height: 80px; margin: 0 auto; background: #d33d39; -webkit-transform: matrix(0.9, 0.5, 0, 1, 0, 0); transform: matrix(0.9, 0.5, 0, 1, 0, 0);
}
.cube:before, .cube:after { display: block; content: ""; position: absolute; width: 100%; height: 100%;
}
.cube:before { background: #279099; -webkit-transform: matrix(1, -1, 1, 0, 40, -80); transform: matrix(1, -1, 1, 0, 40, -80);
}
.cube:after { background: #e59b2a; -webkit-transform: matrix(1, -1, 0, 1, 80, -40); transform: matrix(1, -1, 0, 1, 80, -40);
}
@-webkit-keyframes top { 0%, 33.33%, 100% { -webkit-transform: translate(0, -79px); transform: translate(0, -79px); } 50%, 83.33% { -webkit-transform: translate(0, -158px); transform: translate(0, -158px); }
}
@keyframes top { 0%, 33.33%, 100% { -webkit-transform: translate(0, -79px); transform: translate(0, -79px); } 50%, 83.33% { -webkit-transform: translate(0, -158px); transform: translate(0, -158px); }
}
@-webkit-keyframes bottom { 0%, 33.33%, 100% { -webkit-transform: translate(0, 79px); transform: translate(0, 79px); } 50%, 83.33% { -webkit-transform: translate(0, 158px); transform: translate(0, 158px); }
}
@keyframes bottom { 0%, 33.33%, 100% { -webkit-transform: translate(0, 79px); transform: translate(0, 79px); } 50%, 83.33% { -webkit-transform: translate(0, 158px); transform: translate(0, 158px); }
}
html { background-color: #262626;
}
html, body { height: 100%; overflow: hidden;
}

Cubes - Script Codes JS Codes

//A gif from flrn.nl/gifs/ recreated in pure css

Home Page	Home
Developer	Jon Ambas
Username	jonambas
Uploaded	October 17, 2022
Rating	4.5
Size	3,469 Kb
Views	14,168

Do you need developer help for 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!

Jon Ambas (jonambas) Script Codes

Name	Size
Bee Mine	5,531 Kb
Drip Drop	3,011 Kb
Playing with SVGs	3,215 Kb
Polygons with clip-path	4,602 Kb
A Pen by Jon Ambas	1,826 Kb
Cell Focusing	4,757 Kb
Sidebar Thing	2,779 Kb
Happy New Years	7,291 Kb
Coffee	2,651 Kb
Looping through a sprite sheet	2,897 Kb

Create amazing blog posts 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!

Similar Scripts & Codes

Name	Username	Size
Learning FlexBox	Alex_rodrigues	2,821 Kb
Dragonball Dragon Radar	DouglasGlover	2,157 Kb
Flat buttons for Eliassen.com	Kdooley89	1,737 Kb
Working around OS X Dynamic Scrollbars	Jrjenk	2,279 Kb
TheCalendar.js	The-teacher	6,330 Kb
TestTube CSS	EZPK	2,710 Kb
Simple jQuery Slider	Jurbank	2,874 Kb
Experiment - SCSS SVG Background Image with Variables	See8ch	3,270 Kb
Zip Button test	Lje7462	1,932 Kb
Ghost Buttons with CSS3	Mithicher	2,509 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!