3D Cube

Developer
Jon Christensen
Size
2,543 Kb
Views
60,720
  1. 3D Cube Previews
  2. 3D Cube HTML Codes
  3. 3D Cube CSS Codes

How do I make an 3d cube?

Adapted from docs here: http://desandro.github.io/3dtransforms/Basic 3D shapes and animation in CSS.. What is a 3d cube? How do you make a 3d cube? This script and codes were developed by Jon Christensen on 03 August 2022, Wednesday.

3D Cube Previews
IQ Test

3D Cube - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Cube</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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! */ .cube-container { width: 200px; height: 200px; position: relative; perspective: 1000px; margin: 0 auto;
}
#cube { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transform: translateZ( -100px ) rotateZ(45deg) rotateX(45deg); animation: spin 5s infinite linear;
}
@keyframes spin { 0% { transform: translateZ( -100px ) rotateY(360deg) rotateZ(0deg) rotateX(45deg) } 50% { transform: translateZ( -100px ) rotateY(180deg) rotateZ(180deg) rotateX(45deg) } 100% { transform: translateZ( -100px ) rotateY(0deg) rotateZ(360deg) rotateX(45deg) }
}
#cube figure { width: 100%; height: 100%; display: block; position: absolute; line-height: 200px; background: rgba(0, 0, 255, 0.25);
font-size: 120px;
font-weight: bold;
color: #fff;
text-align: center; border: 1px dotted blue; backface-visibility: hidden;
}
#cube .front { transform: rotateY( 0deg ) translateZ( 100px ); }
#cube .back { transform: rotateX( 180deg ) translateZ( 100px ); }
#cube .right { transform: rotateY( 90deg ) translateZ( 100px ); }
#cube .left { transform: rotateY( -90deg ) translateZ( 100px ); }
#cube .top { transform: rotateX( 90deg ) translateZ( 100px ); }
#cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="cube-container">
<div id="cube"> <figure class="face front">1</figure> <figure class="face back">2</figure> <figure class="face left">3</figure> <figure class="face right">4</figure> <figure class="face top">5</figure> <figure class="face bottom">6</figure>
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

3D Cube - Script Codes CSS Codes

.cube-container { width: 200px; height: 200px; position: relative; perspective: 1000px; margin: 0 auto;
}
#cube { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transform: translateZ( -100px ) rotateZ(45deg) rotateX(45deg); animation: spin 5s infinite linear;
}
@keyframes spin { 0% { transform: translateZ( -100px ) rotateY(360deg) rotateZ(0deg) rotateX(45deg) } 50% { transform: translateZ( -100px ) rotateY(180deg) rotateZ(180deg) rotateX(45deg) } 100% { transform: translateZ( -100px ) rotateY(0deg) rotateZ(360deg) rotateX(45deg) }
}
#cube figure { width: 100%; height: 100%; display: block; position: absolute; line-height: 200px; background: rgba(0, 0, 255, 0.25);
font-size: 120px;
font-weight: bold;
color: #fff;
text-align: center; border: 1px dotted blue; backface-visibility: hidden;
}
#cube .front { transform: rotateY( 0deg ) translateZ( 100px ); }
#cube .back { transform: rotateX( 180deg ) translateZ( 100px ); }
#cube .right { transform: rotateY( 90deg ) translateZ( 100px ); }
#cube .left { transform: rotateY( -90deg ) translateZ( 100px ); }
#cube .top { transform: rotateX( 90deg ) translateZ( 100px ); }
#cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); }
3D Cube - Script Codes
3D Cube - Script Codes
Home Page Home
Developer Jon Christensen
Username JMChristensen
Uploaded August 03, 2022
Rating 3
Size 2,543 Kb
Views 60,720
Do you need developer help for 3D 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!

Jon Christensen (JMChristensen) Script Codes
Name
Custom Stagger Start Point
CSS Transition End Sequence
Velocity Example
Vue JS Filtering
SVG Animated Stroke Dash
Image Cover
Simple CSS Loaders
SVG Button Animation
Graphs and Snap.svg
Google Button Ripple
Create amazing marketing copy 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!