سایت آموزشی فری لرن

300 x 150
x
 
<!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>
آدرس با موفقیت کپی شد