当前位置：首页 > news >正文

js实现2D图片堆叠在一起呈现为3D效果，类似大楼楼层的效果，点击每个楼层不会被其他楼层遮挡

news 来源：原创 2025/5/7 3:04:40

js实现2D图片堆叠在一起呈现为3D效果，类似大楼楼层的效果，点击每个楼层不会被其他楼层遮挡。实现过程使用元素的绝对定位，通过伪元素设置背景图片和文字，效果如下：

index.jsx：

import React, { useEffect, useState } from 'react'
import styles from './style.less'export default function index() {const handleClick = (floor) => {console.log(floor);}return (<div className={styles.container}><div className={styles.floor} onClick={() => handleClick(1)}></div><div className={styles.floor} onClick={() => handleClick(2)}></div></div>)
}

style.less：

.container {position: relative;width: 200px; /* 容器宽度 */height: 400px; /* 容器高度 */
}.floor {position: absolute;cursor: pointer;&.disabled{// 阻止元素响应鼠标/指针事件，用户无法点击、悬停或与元素进行任何交互pointer-events: none;&::after{opacity: .15;}}&::before{transform: scale(0.71);content: "";display: block;transition: all .3s;pointer-events: none;position: absolute;background-repeat: no-repeat;background-position: center;background-size: cover;}&::after{display: block;position: absolute;font-style: italic;font-size: 23px;color: #ff0000;right: -146px;font-weight: 100;}&:hover{&::after{color: #ffffff;font-size: 25px;}}&:nth-child(1){bottom: 0px;&::before{width: 300px;height: 160px;background: url(~@/assets/images/1.png) no-repeat center / 100% 100%;top: -65px;left: -10px;}&::after{content: "1F";height: 36px;line-height: 36px;}&:hover{&::before{// background-image: url(/images/1f-active.png);background-color: #a5fcc8;}}}&:nth-child(2){bottom: 73px;&::before{width: 300px;height: 160px;background: url(~@/assets/images/1.png) no-repeat center / 100% 100%;top: -65px;left: -10px;}&::after{content: "2F";height: 36px;line-height: 36px;}&:hover{&::before{// background-image: url(/images/2f-active.png);background-color: #a5fcc8;}}}
}