效果演示：https://www.cytqq.com/showreel/web-html/001.html
- html+css代码：
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.parentAnimateBox {
width: 355px;
height: 421px;
perspective: 800px;
border: 1px solid red;
overflow: hidden;
}
.childAnimateBox {
width: 100%;
height: 100%;
background: url(img/asd.png) no-repeat left center;
-webkit-transition: transform .2s;
transition: transform .2s;
}
</style>
</head>
<body>
<div class="parentAnimateBox">
<div class="childAnimateBox">
</div>
</div>
</body>
- js代码：
<script type="text/javascript">
$(function() {
//outerWidth:元素的宽度 outerHeight:元素的高度
var phoneW = $(".parentAnimateBox").outerWidth() / 2;
var phoneH = $(".parentAnimateBox").outerHeight() / 2;
var rotateStatic = 20; //给一个初始值
$(".parentAnimateBox").mousemove(function(e) { //鼠标移入
//pageY:鼠标位置，相对于可视浏览器边缘
var pageY = e.pageY;
var pageX = e.pageX;
var tempX = pageX - phoneW;
var tempY = pageY - phoneH;
var datalX = tempX / phoneW;
var datalY = tempY / phoneH;
$(".childAnimateBox").css({
//transform: rotate(45deg); css3属性，旋转角度
transform: 'rotateX(' + rotateStatic * -datalY + 'deg)' + 'rotateY(' + rotateStatic * datalX + 'deg)' + 'scale(1.1)'
})
});
//鼠标移开事件
$(".childAnimateBox").mouseleave(function(e) {
$(".childAnimateBox").css({
transform: ''
})
});
})
</script>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
爱前端导航 | 一个互联网全职业的聚合资源网址导航
