3D Transform CSS Style
3D Transform:-
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #36363c;
}
.box{
position: relative;
width: 300px;
height: 576px;
background:url(resources/n3.jpg);
background-size: 150%;
transform: rotate(-45deg) skewY(25deg);
box-shadow: -25px 40px 4px rgba(0,0,0,.2);
transition: .5s;
}
.box:hover{
transform: rotate(-45deg) skewY(25deg) translate(20px,-20px);
box-shadow: -25px 40px 4px rgba(0,0,0,.5);
}
.box:before{
content:'';
position: absolute;
top: 0;
left: -20px;
height: 100%;
width: 20px;
background: #e4e4e4;
box-sizing: border-box;
border-top: 576px solid #78db6f;
transform-origin:right;
transform: skewY(-58deg);
}
.box::after{
content:'';
position: absolute;
bottom: -32px;
left: 0px;
height: 32px;
width: 100%;
background: #78db6f;
box-sizing: border-box;
transform-origin:top;
transform: skewX(-32deg);
}
.box .glass{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:rgba(255,255,255,0,.001);
box-shadow: 0 0 10px rgba(0,0,0,0);
transition:0.5s;
overflow: hidden;
}
.box .glass:before{
content: '';
position:absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background:rgba(255,255,255,0.05);
transform:skewX(-5deg);
}
.box:hover .glass{
top: -40px;
left:30px;
background:rgb(255,255,255,0.05);
box-shadow:-2px 2px 10px rgba(0,0,0,0.2);
}
.box:hover .glass:nth-child(2){
top: -80px;
left:60px;
background:rgb(255,255,255,0.05);
box-shadow:-2px 2px 10px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="box">
<div class="glass"></div>
<div class="glass"></div>
</div>
</body>
</html>
Output:-
Comments
Post a Comment
Please do not enter any spam link in the comment box.