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

1.效果

3D图片动画效果

2.组件部分

import "./index.less"/*** 3D图片动画效果* @pictures: 图片数组[封面,英雄,标题]*/
export const Picture3D = (props: any) => {console.log("3D图片动画效果", props)return <divclassName='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`}>{/* 组件使用传值 */}<Picture3Dwidth={300}height={500}onClick={() => { console.log('点击了') }}pictures={[require('@/assets/3.webp'), require('@/assets/8.png'), require('@/assets/1.png')]}/></div>})