3d Animation css | image hover effects | image 3d effects css
.png)
In this video, I tell about how to rotate images in 3d effects by using only pure CSS hover effects. Just watch the complete video and press the like button.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="image">
<!-- upload your img -->
<img src="" class="img" alt="deer">
</div>
</div>
</body>
</html>
css
*{padding: 0;
margin: 0;
}
.container {
width: 100%;
min-height: 100vh;
background: #333;
}
.image {
perspective: 3000px;
width: 50%;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
}
.image img {
transform: rotateX(70deg) rotateZ(-60deg)
translate3d(-120px, 0px, 70px);
box-shadow: -80px 60px 15px 5px rgba(0,0,0,0.4);
transition: all .4s;
transform-style: preserve-3d;
}
.image:hover img {
transform: rotateX(0deg) rotateZ(0deg)
translate3d(0px, 0px, 0px);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
Click me
Just copy it on your project
And Don't forget to Subscribe To my youtube channel link
Subscribe me
Tags:
imgs
.png&description=3d animation css | image hover effects | image 3d effects css){kind=link}