3D Perspective CSS Hover Effects

byCodingFlicks -October 29, 2020

0

Hello Friends, Today, I will share another simple code snippet based on creating a 3D perspective CSS hover effects using HTML and CSS. In this image hover CSS effect, I used CSS transform the style of 'preserved-3d,' and CSS transform rotate animation to create a hover effect where the image will initially remain flat. Still, whenever we hover over it, the image will become perpendicular. I have shared more CSS animation based snippets before. Check those snippets if you want. All the coding used here is quite self-explanatory, so without explaining further, I am providing you the code to use it and make the modification by yourself.

ADD HTML

<!DOCTYPE html>
<!--code by Codingflicks (www.codingflicks.com)-->
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3D Perspective CSS Hover Effects</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="box">
		<div class="single-box"><img alt="" class="imgBox" src="1.jpg"></div>
	</div>
</body>
</html>

ADD CSS

* {
	padding: 0;
	margin: 0;
}
.box {
	width: 100%;
	min-height: 100vh;
	background: #FFDE2A;
}
.single-box {
	perspective: 2000px;
	width: 50%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transform-style: preserve-3d;
}
.single-box .imgBox {
	transform: rotateX(70deg) rotateZ(-30deg) translate3d(-0px, 0px, 70px);
	box-shadow: -60px 100px 20px 2px rgba(0, 0, 0, 0.4);
	transition: all .4s;
	transform-style: preserve-3d;
	width: 100%;
}
.single-box:hover .imgBox {
	transform: rotateX(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0);
}

I hope you liked this simple yet exciting project. Please follow our social media profiles to keep connected with this blog. Again thank you for visiting this blog, and keep coming.

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