CSS01——随鼠标3D旋转

完整代码展示

<template>
    <div class="container">
        <div class="content">

            <el-image  class="img-view" :src="img" fit="cover" 
                :style="{width: `${width}px`, height: `${height}px`, '--xdeg': `${xdeg}deg`, '--ydeg': `${ydeg}deg`}"
                @mouseenter="onMouseenter" @mousemove="onMousemove" @mouseleave="onMouseleave"></el-image>

        </div>
    </div>
</template>

<script setup>
    import { ref, onMounted } from 'vue'
    
    const img = 'https://img2.baidu.com/it/u=1624963289,2527746346&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'

    const width = ref(250)
    const height = ref(400)
    const xdeg = ref(0)
    const ydeg = ref(0)

    /**
     * 鼠标划入事件
     */
    const onMouseenter = (e) => {
        
    }

    /**
     * 鼠标划出事件
     */
    const onMouseleave = (e) => {
        ydeg.value = 0
        xdeg.value = 0
    }

    const xMax = [-10, 10]
    const yMax = [-10, 10]
    /**
     * 鼠标滑动事件
     */
    const onMousemove = (e) => {
        ydeg.value = -(e.offsetX * (xMax[1] - xMax[0]) / width.value + xMax[0])
        xdeg.value = e.offsetY * (yMax[1] - yMax[0]) / height.value + yMax[0]
    }

</script>

<style scoped>
.container{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: #000000;
}
.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.img-view {
    border-radius: 6px;
    box-shadow: 1px 1px 7px 5px #FFFFFF44;
    cursor: pointer;
    transition: all .2s;
    transform: perspective(500px) rotateX(var(--xdeg, 0deg)) rotateY(var(--ydeg, 0deg));
}

.img-view:hover {
    transition: none;
}
</style>