3D Cube Rotating Animation | Pure CSS Animation

byCodingFlicks -September 18, 2020

0

CSS animation plays a crucial role in bringing static web pages to life. Developers use the technique to change the HTML elements of a website, create smooth transitions, and create interesting effects. It makes the user experience interesting without relying on JavaScript. Today, we will share with you a snippet of a 3D rotating cube made using CSS animation. The process of creating this snippet is shown in the video tutorial below. Hope you watch the video tutorial.

Video Tutorial:

We hope you have watched the 3D cube animation tutorial made with HTML CSS. Attracting and retaining the user's attention is very important in this digital age. CSS animation can come in handy in this case. The aesthetic effects created through it keep the users hooked and encourage them to explore the website further. In a word, it can make a site stand out from the crowd and create a memorable impression. Animations made through CSS are very lightweight and the browser handles them efficiently. Smoother animations and better performance can be achieved compared to JavaScript-based animations, especially for simple effects.

In the HTML part, We have a 'wrapper' div to center the cube. We have a 'cube-wrap' div to establish the 3D environment. and a 'box' div that contains all the individual faces of the cube we are making. in the CSS part, we have done some basic styling to center the cube on the page. We used css perspective to create the illusion of depth and applied it to the 'cube-wrap' div. Then we set the background image for each face of the cube. We used rotateY, translateZ, rotateX and later used transform-style to make a cube like the way you see above. CSS Keyframes animation was applied to rotate the cube.

You may Also Like:

CSS 3D Rotating Cube Animation [ Source Code ]:

To create this snippet, we have to create an HTML and CSS file. Copy the code from the code box below and paste it into your files. You can also download the code from the download button below this blog post.

HTML:

  <!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->	  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Cube Rotating Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
		<div class="cube-wrap">
			<div class="box">
				<div class="single-box side-back"></div>
				<div class="single-box side-top"></div>
				<div class="single-box side-bottom"></div>
				<div class="single-box side-left"></div>
				<div class="single-box side-right"></div>
				<div class="single-box side-front"></div>
			</div>
		</div>
	</div>
</body>
</html>

CSS:

  body {
	background: #F7C339; 
}
.wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.cube-wrap {
	width: 400px;
	height: 400px;
	perspective: 2000px;
	perspective-origin: 50% -500px;
}
.single-box {
	background-image: url(img/1.jpg);
	background-size: cover;
	display: block;
	position: absolute;
	width: 360px;
	height: 360px;
	transform: rotateY(45deg) translateZ(-200px) rotateX(15deg);
	transform-origin: 50% 50% 0;
	border: 3px solid #fff;
}
.box {
	transform-style: preserve-3d;
	animation: rotate 10s infinite linear;
}
.side-front {
	transform: translateZ(180px);
}
.side-back {
	transform: rotateY(180deg) translateZ(180px);
}
.side-top {
	background-image: url(img/1.jpg);
	transform: rotateX(90deg) translateZ(180px);
}
.side-bottom {
	transform: rotateX(-90deg) translateZ(180px);
}
.side-left {
	transform: rotateY(-90deg) translateZ(180px);
}
.side-right {
	transform: rotateY(90deg) translateZ(180px);
}
@keyframes rotate {
	0% {
		-webkit-transform: rotateY(0);
	}
	100% {
		-webkit-transform: rotateY(360deg);
	}
}

CSS animation has become an indispensable tool for web developers in this modern era of web design. The CSS animation snippet we have created today showcases the power of CSS transforms and animations to bring complex ideas to life with relatively simple code. We hope you have collected the code. For more, click the load more button on our homepage. Thanks for the visit.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.