CSS3 3D cube Animation with image

In this blog, I will share another simple yet exciting snippet about creating a 3D cube animation with an image using HTML and CSS. during this process, no javascript or jquery was needed. I have made this animation possible using CSS, the keyframes animation. Previously, I have shared some CSS animation based projects. Check those out if you are interested.

CSS animation is a web design process for animating certain HTML elements without taking any help from javascript. CSS animation is one of the most powerful tools in web design. It makes a simple-looking website awesome to its users. Creative CSS animations can draw the visitors' attention and increase user engagement before developers had to use javascript for animating the HTML elements while creating a website. Nowadays, with the help of css3, we can achieve lots of nice animations.

In this project, we will create a nice 3d cube CSS animation with CSS keyframes animation. Before proceeding further, I will suggest you follow the below tutorial from start to finish.

I hope you watched the whole video and grab some idea about the snippet. So in the HTML markup, I have taken a div named 'rotating-box' where I have added another div named 'single-rb.' later, I have taken six div elements, all with different names with an image inside them.

You may also like:

Now we are moving to CSS. First, I have given a dark slate gray color to the body element. Then I have the main div 'rotating-box' width and height of 400px. Later I gave it a margin and perspective value. For the 'single-rb' div, I have provided the same width and height and gave a transform-style and margin-top value. Then I set some CSS transform values for each div inside the 'single-rb' div element. Besides, I have set CSS transform-origin value for some of the divs inside the 'single-rb' class. In the end, I set a CSS keyframes animation so that the cube rotate from zero to 360 degree in the y-direction.

3D Cube animation with image (Source Code):

To create this snippet, you have to create an HTML and CSS file and then link the CSS file to your HTML file. Please, after Copying, paste the code below into the appropriate file and save. Run the project to your browser and see how it looks.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3 3D cube Animation with image</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="rotating-box">
		<div class="single-rb">
			<div class="front-side"><img alt="" src="https://i.postimg.cc/C1203ZrV/aaa.jpg"></div>
			<div class="back-side"><img alt="" src="https://i.postimg.cc/C1203ZrV/aaa.jpg"></div>
			<div class="left-side"><img alt="" src="https://i.postimg.cc/C1203ZrV/aaa.jpg"></div>
			<div class="right-side"><img alt="" src="https://i.postimg.cc/C1203ZrV/aaa.jpg"></div>
			<div class="top-side"><img alt="" src="https://i.postimg.cc/C1203ZrV/aaa.jpg"></div>
			<div class="bottom-side"><img alt="" src="https://i.postimg.cc/C1203ZrV/aaa.jpg"></div>
		</div>
	</div>
</body>
</html>

CSS:

body {
	background: darkslategray;
}
.rotating-box {
	width: 400px;
	height: 400px;
	margin: 10px auto;
	perspective: 800px;
}
.single-rb {
	width: 400px;
	height: 400px;
	animation: rotate 15s linear infinite;
	transform-style: preserve-3d;
	margin-top: 120px;
}
.single-rb img {
	height: 400px;
	width: 400px;
}
.single-rb div {
	position: absolute;
	width: 400px;
	height: 400px;
}
.front-side {
	transform: translateZ(200px);
}
.back-side {
	transform: rotateY(180deg) translateZ(200px);
}
.left-side {
	transform: rotateY(-90deg) translateX(-200px);
	transform-origin: left;
}
.right-side {
	transform: rotateY(90deg) translateX(200px);
	transform-origin: right;
}
.top-side {
	transform: rotateX(-90deg) translateY(-200px);
	transform-origin: top;
}
.bottom-side {
	transform: rotateX(90deg) translateY(200px);
	transform-origin: bottom;
}
@keyframes rotate {
	0% {
		transform: rotateY(0deg);
	}
	100% {
		transform: rotateY(360deg);
	}
}

Thank you for stopping by this blog. Please follow my social media profiles to stay connected with the blog. Keep coming.

1 Comments

Post a Comment

About Us

Contact Form

CSS3 3D cube Animation with image

You might like

1 Comments

Post a Comment

Contact Form