3D Cube - Pure CSS

Developer
Mario Duarte
Size
3,010 Kb
Views
54,648
  1. 3D Cube - Pure CSS Previews
  2. 3D Cube - Pure CSS HTML Codes
  3. 3D Cube - Pure CSS CSS Codes
  4. 3D Cube - Pure CSS JS Codes

How do I make an 3d cube - pure css?

A 3D cube using prespective and transforms in CSS 3. What is a 3d cube - pure css? How do you make a 3d cube - pure css? This script and codes were developed by Mario Duarte on 04 August 2022, Thursday.

3D Cube - Pure CSS Previews
IQ Test

3D Cube - Pure CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Cube - Pure CSS</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>	<div class="container">	<div id="cube" class="show-front">	<figure class="front"></figure>	<figure class="back"></figure>	<figure class="right"></figure>	<figure class="left"></figure>	<figure class="top"></figure>	<figure class="bottom"></figure>	</div>	</div> <script src="js/index.js"></script>
</body>
</html>

3D Cube - Pure CSS - Script Codes CSS Codes

@-webkit-keyframes rotateCube { 0% { -webkit-transform: translateZ(-100px) rotateY(0deg) rotateX(0deg); transform: translateZ(-100px) rotateY(0deg) rotateX(0deg); } 100% { -webkit-transform: translateZ(-100px) rotateY(360deg) rotateX(360deg); transform: translateZ(-100px) rotateY(360deg) rotateX(360deg); }
}
@keyframes rotateCube { 0% { -webkit-transform: translateZ(-100px) rotateY(0deg) rotateX(0deg); transform: translateZ(-100px) rotateY(0deg) rotateX(0deg); } 100% { -webkit-transform: translateZ(-100px) rotateY(360deg) rotateX(360deg); transform: translateZ(-100px) rotateY(360deg) rotateX(360deg); }
}
body { margin: 0; padding: 0 20px; font-family: 'helvetica', sans-serif; height: 100%; background-color: #eeeeee; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-trasform: translate3d(0, 0, 0);
}
.container { width: 200px; height: 200px; position: relative; -webkit-perspective: 200px; perspective: 200px; margin: 200px auto;
}
.container #cube { width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; -webkit-transition: transform 1s; -moz-transition: transform 1s; -ms-transition: transform 1s; -webkit-animation: rotateCube 4s linear 0s infinite forwards; animation: rotateCube 4s linear 0s infinite forwards;
}
.container #cube figure { margin: 0; width: 198px; height: 198px; display: block; position: absolute; border: 1px solid #999999; background-color: rgba(0, 0, 0, 0.05);
}
.container #cube figure.front { transform: rotateY(0deg) translateZ(100px); -webkit-transform: rotateY(0deg) translateZ(100px); -moz-transform: rotateY(0deg) translateZ(100px); -ms-trasform: rotateY(0deg) translateZ(100px);
}
.container #cube figure.back { transform: rotateX(180deg) translateZ(100px); -webkit-transform: rotateX(180deg) translateZ(100px); -moz-transform: rotateX(180deg) translateZ(100px); -ms-trasform: rotateX(180deg) translateZ(100px);
}
.container #cube figure.right { transform: rotateY(90deg) translateZ(100px); -webkit-transform: rotateY(90deg) translateZ(100px); -moz-transform: rotateY(90deg) translateZ(100px); -ms-trasform: rotateY(90deg) translateZ(100px);
}
.container #cube figure.left { transform: rotateY(-90deg) translateZ(100px); -webkit-transform: rotateY(-90deg) translateZ(100px); -moz-transform: rotateY(-90deg) translateZ(100px); -ms-trasform: rotateY(-90deg) translateZ(100px);
}
.container #cube figure.top { transform: rotateX(90deg) translateZ(100px); -webkit-transform: rotateX(90deg) translateZ(100px); -moz-transform: rotateX(90deg) translateZ(100px); -ms-trasform: rotateX(90deg) translateZ(100px);
}
.container #cube figure.bottom { transform: rotateX(-90deg) translateZ(100px); -webkit-transform: rotateX(-90deg) translateZ(100px); -moz-transform: rotateX(-90deg) translateZ(100px); -ms-trasform: rotateX(-90deg) translateZ(100px);
}

3D Cube - Pure CSS - Script Codes JS Codes

//NO JS just pure css
3D Cube - Pure CSS - Script Codes
3D Cube - Pure CSS - Script Codes
Home Page Home
Developer Mario Duarte
Username MarioDesigns
Uploaded August 04, 2022
Rating 3
Size 3,010 Kb
Views 54,648
Do you need developer help for 3D Cube - Pure CSS?

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!

Mario Duarte (MarioDesigns) Script Codes
Name
3D Pyramid Animation
Carbon Atom Animation
Floating Loading Animation
Popular Pens with ReactJS
Console Simulator
Door Animation
Pure CSS circonferences
Floating Particles
JavaScript Lesson - Todo list
CSS 3D loading
Create amazing video scripts 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!