版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/qq_22755565/article/details/78603265
css3实现3d焦点图
在之前写的焦点图的基础上添加3d效果
要点:1、perspective添加透视效果
2、计算鼠标位置
<div class="border-3d-wrap">
<div class="wrap" onclick="test()">
<img src="../img/1.png" alt="" id='bannerImg'>
</div>
</div>
.border-3d-wrap {
width: 730px;
height: 336px;
margin: 0 auto;
perspective: 300; /* 添加在需要透视元素的父级 */
-webkit-perspective: 500;/* chrome 使用perspective: 300px;或-webkit-perspective: 300; */
}
.wrap{
transition: transform .1s ease-in-out;
}
#bannerImg {
display: block;
width: 730px;
height: 336px;
transition: opacity 1s ease-in-out;
}
const threeDWrap = document.getElementsByClassName("border-3d-wrap")[0]
const imgWrap = document.getElementsByClassName("wrap")[0]
const wrapX = threeDWrap.offsetLeft
const wrapY = threeDWrap.offsetTop
const wrapWidth = threeDWrap.offsetWidth
const wrapHeight = threeDWrap.offsetHeight
const wrapWidthHalf = threeDWrap.offsetWidth / 2
const wrapHeightHalf = threeDWrap.offsetHeight / 2
function animation3D(ev) {
Ev= ev || window.event;
const pointX = Ev.clientX//获取鼠标位置
const pointY = Ev.clientY
const signX= Math.abs(pointX - wrapX) / (pointX - wrapX)
const signY= Math.abs(pointY - wrapY) / (pointY - wrapY)
let shadowOffsetLeft = rotateX = shadowOffsetTop = rotateY = -100
if ((pointX - wrapX) >=0 && (pointX - wrapX) <= wrapWidth && (pointY - wrapY) >=0 && (pointY - wrapY) <= wrapHeight){//鼠标位置在焦点图内时触发
shadowOffsetLeft = (pointX - wrapX - wrapWidthHalf) / wrapWidthHalf * -10
rotateY = (pointX - wrapX - wrapWidthHalf) / wrapWidthHalf * 1
shadowOffsetTop = (pointY - wrapY - wrapHeightHalf) / wrapHeightHalf * 10
rotateX = (pointY - wrapY - wrapHeightHalf) / wrapHeightHalf * -1
}
imgWrap.style.boxShadow = `${shadowOffsetLeft === -100 ? 0 : shadowOffsetLeft}px ${shadowOffsetTop === -100 ? 0 : shadowOffsetTop}px 50px 0 #888`
imgWrap.style.transform = `rotate3d(${rotateX === -100 ? 0 : rotateX}, ${rotateY === -100 ? 0 : rotateY}, 0, 2deg)`
}
document.onmousemove = animation3D;