css3实现3d焦点图

版权声明：本文为博主原创文章，转载请注明出处。 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;