3D图片动画效果组件封装

1.效果

3D图片动画效果

2.组件部分

import "./index.less"


/**
 * 3D图片动画效果
 * @pictures: 图片数组[封面,英雄,标题]
 */
export const Picture3D = (props: any) => {
    console.log("3D图片动画效果", props)

    return <div
        className='picture3D'
        onClick={props.onClick}
        onMouseEnter={props.onMouseEnter}
        style={{
            width: props.width || "100%",
            height: props.height || "100%",
        }}
    >
        {/* 封面 */}
        <img src={props.pictures && (props.pictures[0] || "")} class="cover" />
        {/* 英雄 */}
        <img src={props.pictures && (props.pictures[1] || "")} class="hero" />
        {/* 标题 */}
        <img src={props.pictures && (props.pictures[2] || "")} class="title" />
    </div>
};

3. css样式部分

// 3D图片动画效果
.picture3D {
    // width: 300px;
    // height: 500px;
    position: relative;

    & img {
        position: absolute;
        left: 0;
        width: 100%;
        /* 因为图片的效果是有过渡的，我们在这里也统一设置一下 */
        transition: 0.5s;
        height: 100%;
        width: 100%;
    }

    .cover {
        height: 100%;
        z-index: 1;
    }

    .hero {
        height: 100%;
        z-index: 2;
        /* 英雄在最初是不可见的 */
        opacity: 0;
    }

    .title {
        z-index: 3;
    }
}

.picture3D:hover .cover {
    /* 设置旋转 3D透视 */
    transform: perspective(500px) rotateX(25deg);
    /* 设置阴影 */
    box-shadow: 0 35px 35px -8px rgba(0, 0, 0, 0.75);
}

.picture3D:hover .hero {
    /* 透明度设置为不透明 */
    opacity: 1;
    /* 同样设置 3D 效果，然后横向不移动，纵向向上移动 50px，z 轴上靠近我们的眼睛一点设置 50px */
    transform: perspective(500px) translate3d(0, -50px, 50px);
}

.picture3D:hover .title {
    /* 设置 3D 效果，，然后横向不移动，纵向向上移动 25px，z 轴上靠近我们的眼睛一点设置 50px */
    transform: perspective(500px) translate3d(0, -25px, 50px);
}

4. 组件使用

import { observer } from 'mobx-react';
import './index.less';
import { Picture3D } from '@/components/MyComponents/index'; // 引用组件






export default observer((props: any) => {




  return <div className={`report bg-white dark:bg-black text-black dark:text-white`}>
    {/* 组件使用传值 */}
    <Picture3D
      width={300}
      height={500}
      onClick={() => { console.log('点击了') }}
      pictures={[require('@/assets/3.webp'), require('@/assets/8.png'), require('@/assets/1.png')]}
    />
  </div>

})