CSS 3D Background Animation Effects | CSS Animation

Today in this tutorial i will show you how to create 3D Background Animation Effects using CSS. You can see demo on below button and also get source code of this 3D scripts using press download button.

Demo Download

Step to create 3D Background Animation Effects using CSS

To create 3D background animation effects we need to follow the below all steps

  1. Write an HTML Markup
  2. Write CSS

1. Write an HTML Markup

First we need to create an index.html file and paste the following HTML markup in it.

<!--
Author: TesWesM
Website: https://teswesm.com/
-->
<!DOCTYPE html>
<html>
<head>
	<title>CSS 3D Background Animation</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<section>
		<div class="pattern">
			<div class="face face1"></div>
			<div class="face face2"></div>
		</div>
	</section>
</body>
</html>

As you see above html code here we use link to connect style.css file in head section and also we use class pattern, face, face1 and face2 in body section so now we write css file for stylish and animation effects.

2. Write CSS

Now we need to Style our animation, paste the following styles in CSS either in head section or you can also include external style sheet.

/*
Author: TesWesM
Website: https://teswesm.com/
*/
*
{
	margin: 0;
	padding: 0;
}
section {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.pattern {
	position: relative;
	transform-style: preserve-3d;
	perspective: 1000px;
	animation: animateBg 10s ease-in-out infinite;
}
@keyframes animateBg {
	0%,100% {
		transform: scale(1.6) rotate(-15deg);
	}
	50% {
		transform: scale(1.6) rotate(15deg);
	}
}
.pattern .face {
	position: relative;
	width: 100%;
	height: 50vh;
	background: url(check.jpg);
	background-size: 100px 100px;
	animation: animate 1s linear infinite;
}
@keyframes animate {
	0% {
		background-position: 0;
	}
	100% {
		background-position: 100px;
	}
}
.pattern .face.face2 {
	height: 100vh;
	transform-origin: top;
	transform: rotateX(70deg);
}
.pattern .face1:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 125px;
	background: linear-gradient(0deg,rgba(0,0,0,0.5),transparent);
}
.pattern .face2:before {
	content: '';
	position: absolute;
	bottom: top;
	left: 0;
	width: 100%;
	height: 125px;
	background: linear-gradient(180deg,rgba(0,0,0,0.5),transparent);
} 

As you can see above CSS coding here we use all classes to display stylish and animation effects, you just a copy above code and paste in css file.

Conclusion

Today we learnt how to create 3d animation background effects using HTML & CSS, you can add multiple effects just by adding the image’s link in HTML & CSS files.

If you found this tutorial helpful, share it with your friends and developers group.

Demo Download

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Facebook Official Page: T-Code Scripts

Leave a Reply

Your email address will not be published. Required fields are marked *