Introduction
In this tutorial, I'm going to show you how to create a stunning 3D cubic box animation using just HTML and CSS. By the end of this project, you'll be able to build an engaging and visually appealing animation that rotates and transforms seamlessly. We'll start by setting up our project with index.html and style.css files, and then dive into styling each face of the cubic box and applying animations to bring it to life. Let's embark on this journey to create an eye-catching 3D animation together!
Html Code Explanation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>CSS Cubic Box Animation</title>
</head>
<body>
<!-- Container for the cubic box -->
</body>
</html>Here we have set-up our project with basic Html code to write our html code. Here is
<!DOCTYPE html>: Declares the HTML5 document type. <head>: Contains metadata about the HTML document. <meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport for responsive design. <link rel="stylesheet" href="style.css">: Links the external CSS file (style.css) to apply styles. <title>: Sets the title of the HTML document displayed in the browser tab. <body>: Contains the visible content of the HTML document.
<!-- Container for the cubic box -->
<div class="wrapper">
<div class="box">
<!-- Six faces of the cubic box -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</div>
</div>.wrapper Container element for the cubic box animation and works as a parent div. By this we can easily set height and width to the main box. Class .box Represents the 3D cubic box element we will 3D style through this class. .box1 to box6 we can easily add images and animate 3D and to add multiple angles we have given used 6 boxes with classes .box1, .box2.. to .box6.
Video Tutorial
CSS Code Explanation
Let's provide a explanation of each part of the CSS code used for the 3D cubic box animation.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}The * selector applies styles to all elements on the page. padding: 0; and margin: 0; reset the default padding and margin of all elements to zero, ensuring a consistent layout.
box-sizing: border-box; ensures that padding and border are included in the element's total width and height.
html, body {
display: grid;
height: 100%;
place-items: center;
background: #0984e3;
}display: grid; sets the layout of the HTML and body elements to use a grid system. height: 100%; ensures that the body takes up 100% of the viewport height. place-items: center; centers the content both vertically and horizontally within the grid. background: #0984e3; sets the background color of the entire page to a blue shade (#0984e3).
.wrapper {
width: 200px;
height: 200px;
}
.box {
animation: animate 10s ease-in-out infinite;
transform-origin: 100px 100px 0;
transform-style: preserve-3d;
}.wrapper is a class selector targeting a container element. width: 200px; and height: 200px; set the dimensions (width and height) of the container to 200 pixels each.
.box is a class selector targeting the 3D cubic box element. animation: animate 10s ease-in-out infinite; applies the animate animation to the box with a duration of 10 seconds, easing function of ease-in-out, and infinite repetition.
transform-origin: 100px 100px 0; sets the origin point (center of rotation) for the transformations applied to the box. transform-style: preserve-3d; preserves 3D transformations applied to child elements within the box.
@keyframes animate {
from, to {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
16% {
transform: rotateY(-90deg);
}
33% {
transform: rotateY(-90deg) rotateZ(90deg);
}
50% {
transform: rotateY(-180deg) rotateZ(90deg);
}
66% {
transform: rotateY(-270deg) rotateX(90deg);
}
83% {
transform: rotateX(90deg);
}
}
@keyframes animate { ... } defines the keyframes for the animate animation. from, to { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } sets the initial and final states (0 degrees rotation) of the box. 16% { transform: rotateY(-90deg); } rotates the box 90 degrees on the Y-axis at 16% of the animation duration. 33% { transform: rotateY(-90deg) rotateZ(90deg); } combines a 90-degree rotation on the Y-axis with a 90-degree rotation on the Z-axis at 33%. 50% { transform: rotateY(-180deg) rotateZ(90deg); } further rotates the box to 180 degrees on the Y-axis and maintains the 90-degree rotation on the Z-axis at 50%. 66% { transform: rotateY(-270deg) rotateX(90deg); } rotates the box 270 degrees on the Y-axis and 90 degrees on the X-axis at 66%. 83% { transform: rotateX(90deg); } completes the animation by rotating the box 90 degrees on the X-axis at 83%.
.box div {
position: absolute;
width: 200px;
height: 200px;
line-height: 200px;
}.box div targets all div elements inside the .box container. position: absolute; positions each face absolutely within the parent container. width: 200px; and height: 200px; set the width and height of each face to 200 pixels. line-height: 200px; vertically centers the content within each face using the same height as line height.
.box .box1 {
background-image: url("images/mount01.jpg");
background-size: cover;
background-position: center center;
transform: translateZ(100px);
}
/* Styles for box2 to box6 (similar structure) */.box .box1 targets the first face (.box1) within the .box container. background-image: url("images/mount01.jpg"); sets the background image for the face. background-size: cover; scales the background image to cover the face. background-position: center center; centers the background image within the face. transform: translateZ(100px); translates the face along the Z-axis by 100 pixels, positioning it in 3D space towards the viewer. It styles same for box2 to box6 similar structure is used further code is provided in source code file you can download for free.
Conclusion
By combining HTML for structure and CSS for styling and animation, we've successfully created a 3D cubic box animation that rotates and transforms in a visually appealing manner. This project demonstrates the power of CSS for creating interactive and engaging web animations. Feel free to experiment with different properties, timings, and designs to customize and expand upon this concept further. With practice and creativity, you can leverage these techniques to build impressive animations and enhance user experiences on the web. Happy coding!
Download Source Code