Glowing 3D Cube CSS Animation

Glowing 3D Cube CSS Animation

A static website attracts fewer visitors and offers limited interactivity. Various dynamic elements created through CSS animations play an important role in driving engagement on a website. Developers add various CSS3 animation examples to make a website dynamic. CSS 3D Cube Animation is one of them. Today we will use various CSS animation properties to create a cube animation effect that rotates in 3D dimensions and adds a glowing effect. The coding process is demonstrated in the video tutorial below. If you want to see visually, you can watch the video. Subscribe to our channel if you like our content.

Video Tutorial:

Hope you have watched the video tutorial above. CSS animation isn't just some fancy rotation, transformation, or transition, it's a powerful tool that enhances user interaction, storytelling, etc. CSS animations not only inform but also entertain your website visitors.

Today's CSS animation snippet is based on a widely used 3D rotating cube animation. This type of cube animation is used by various portfolios, organizations, and e-commerce websites to showcase their products. We applied rotating effects to this 3D cube using CSS transforms, translations, and keyframe animations. Also, we have used the CSS box-shadow property to give a bluish glowing effect. This snippet is created for experimental purposes only. Its only purpose is to experiment with CSS animation.

You May Also Like:

Glowing 3D Cube CSS Animation [ Source Code ]

To create this 'Glowing 3D Cube CSS Animation' code snippet first we need to create an HTML and then a CSS file. Then copy and paste the following code into your files. In case of any problem, you can download the code from the download button below.

ADD HTML:

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

ADD CSS:

body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	background-color: #091a22;
}
.wrapper {
	perspective: 1000px;
}
.cube {
	position: relative;
	width: 200px;
	height: 200px;
	transform-style: preserve-3d;
	animation: animate 4s linear infinite;
}
.side {
	position: absolute;
	width: 200px;
	height: 200px;
	display: grid;
	background-color: #01b4f9;
	border-radius: 10px;
	place-content: center;
	border: 3px solid #fff;
	box-shadow: 0 0 200px #01b4f9, 0 0 20px #01b4f9, 0 0 30px #01b4f9;
}

.front {
	transform: translateZ(100px);
}
.back {
	transform: rotateY(180deg) translateZ(100px);
}
.top {
	transform: rotateX(90deg) translateZ(100px);
}
.bottom {
	transform: rotateX(-90deg) translateZ(100px);
}
.left {
	transform: rotateY(-90deg) translateZ(100px);
}
.right {
	transform: rotateY(90deg) translateZ(100px);
}

@keyframes animate {
	0% {
		transform: rotateX(0deg) rotateY(0deg);
	}
	100% {
		transform: rotateX(360deg) rotateY(360deg);
	}
}

We hope the code is working properly for you. CSS animation is one of the fundamental elements of modern web design. It is a powerful tool for web designers and developers to convert a static website into a dynamic website. Click the Load More button to get other snippets of our website. Thanks for visiting our website.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box