Introduction:
Welcome to another exciting CSS tutorial! In this guide, we will delve into the fascinating world of CSS animations to create a visually stunning 3D rotating square. Buckle up, as we explore the ins and outs of the code snippet provided, and by the end of this tutorial, you’ll have a dynamic square spinning in 3D space.
Things You Will Learn:
- CSS Box Model: Understanding the fundamentals of the CSS box model is crucial for creating layouts. We’ll explore how the universal selector (
*) with specific properties like padding, margin, and box-sizing helps in achieving a clean and consistent design. - Positioning and Transformations: Learn how to position elements precisely on the screen using the
positionproperty and leverage the power of thetransformproperty for smooth animations. We’ll also utilize thetranslatefunction to center our container. - Perspective in CSS: Delve into the concept of perspective in CSS and how it enhances the illusion of depth in our design. The
perspectiveproperty plays a key role in creating a 3D effect. - CSS Animations: Gain insights into CSS animations with the
@keyframesrule. We’ll break down thespinanimation, understanding how it makes our square rotate smoothly.
Video Tutorial:
I would suggest you to watch the video below for a better understanding of how we have implemented the functionality of this project. If you find the video helpful give it a like and subscribe to my YouTube channel where I post new tips, tricks, and tutorials related to HTML, CSS, and Javascript.
Project Folder Structure:
Now before we move on to actual coding we create a project folder structure. We name the project folder – ”3D Square Loading Animation”. Within this folder, we have 2 files. These files are:
- index.html
- style.css
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3D Square Loading</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="square"></div>
</div>
</body>
</html>
CSS:
Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #0091ff;
}
.container {
height: 350px;
width: 350px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
perspective: 800px;
}
.square {
height: 200px;
width: 200px;
background-color: #ffffff;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
transform-style: preserve-3d;
animation: spin 2s infinite;
}
@keyframes spin {
50% {
transform: rotateX(-180deg);
}
100% {
transform: rotateX(-180deg) rotateY(-180deg);
}
}
Conclusion:
Congratulations! You’ve successfully created a mesmerizing 3D rotating square using CSS. Through this tutorial, you’ve gained valuable insights into the CSS box model, positioning, transformations, perspective, and animations. Feel free to experiment with different properties and values to customize your design further.
