<!DOCTYPE html>
<html>
<head>
<script src="https://files.free-learn.ir/Tryitself/css/property/files/jquery.min.js"></script>
<style>
#mainWrapper{
display: flex;
justify-content: center;
align-items: center;
}
#cardsWrapper{
display: flex;
justify-content: space-between;
}
.card{
width: 300px;
height: 175px;
perspective: 300px;
position: relative;
}
.image{
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.image.first{
background-image: url("https://files.free-learn.ir/Tryitself/css/property/files/perspective-demo.jpg");
}
.screen{
background-color: rgba(0, 0, 0, 0.22);
width: 100%;
height: 100%;
transform: translateZ(30px) scale(0.940);
}
.text{
position: absolute;
bottom: 25px;
left: 30px;
color: white;
transform: translateZ(30px) scale(0.940);
}
.text p{
font-size: 2em;
}
h2{
text-align: center;
}
</style>
</head>
<body>
<h2>لطفا ماوس رو روی تصویر زیر ببرید</h2>
<div id="mainWrapper">
<div id="cardsWrapper">
<div class="card">
<div class="image first">
<div class="screen"></div>
<div class="text">
<p>Www.Free-Learn.Ir</p>
</div>
</div>
</div>
</div>
</div>
<script>
$(function(){
var card = $(".card");
card.on('mousemove', function (e){
var x = e.clientX - $(this).offset().left + $(window).scrollLeft();
var y = e.clientY - $(this).offset().top + $(window).scrollTop();
var rY = map(x, 0, $(this).width(), -17, 17);
var rX = map(y, 0, $(this).height(), -17, 17);
$(this).children(".image").css("transform", "rotateY(" + rY + "deg)" + " " + "rotateX(" + -rX + "deg)");
});
card.on('mouseenter', function (){
$(this).children(".image").css({
transition: "all " + 0.05 + "s" + " linear",
});
});
card.on('mouseleave', function (){
$(this).children(".image").css({
transition: "all " + 0.2 + "s" + " linear",
});
$(this).children(".image").css("transform", "rotateY(" + 0 + "deg)" + " " + "rotateX(" + 0 + "deg)");
});
function map(x, in_min, in_max, out_min, out_max){
return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
});
</script>
</body>
</html>