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

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;
      }
    }
  }
}