<html>
<title></title>
<style>
.box1 {
width: 200px;
height: 200px;
transform: perspective(75em) rotateX(1deg);
box-shadow:rgba(22, 31, 39, 0.42) 0px 60px 123px -25px, rgba(19, 26, 32, 0.08) 0px 35px 75px -35px;
border-radius: 10px;
border: 1px solid rgb(213, 220, 226);
border-color:rgb(213, 220, 226) rgb(213, 220, 226) rgb(184, 194, 204);
}
.box2{
width: 200px;
height: 200px;
transform: perspective(1500px) rotateY(15deg);
border-radius: 1rem;
box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
transition: transform 1s ease 0s;
}
.box2:hover {
transform: perspective(3000px) rotateY(5deg);
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
