Javascript 将带有悬停动画的透视变换应用于元素

在React中有许多不同的方式来实现这些样式，但won't个可用的选项之一是内联样式，因为您无法使用内联样式控制:hover个样式.

一种 Select 是像在代码笔中一样使用CSS类.对于React，您唯一需要更改的是class=...变为className=...:

import "./styles.css";

export default function App() {
  return (
    <div className="card-container">
      <div className="image-card perspective-left"></div>
      <div className="image-card perspective-right"></div>
    </div>
  );
}

由于您试图利用MUI的Box，我猜您可能试图将其纳入使用MUI的项目中，并且可能希望在JS方法中使用CSS，而不是全局CSS类名.下面是使用MUI的styled API的示例.使用MUI实现所委托的情感styled API，这看起来也几乎相同.

import React from "react";
import { styled } from "@mui/material/styles";

const ImageCard = styled("div")`
  display: inline-block;
  box-sizing: border-box;
  margin: 1rem;
  width: 240px;
  height: 320px;
  padding: 8px;
  border-radius: 1rem;
  background: url("https://picsum.photos/id/1049/240/320");
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
`;
const ImageCardLeft = styled(ImageCard)`
  transform: perspective(1500px) rotateY(15deg);
  transition: transform 1s ease 0s;
  &:hover {
    transform: perspective(3000px) rotateY(5deg);
  }
`;
const ImageCardRight = styled(ImageCard)`
  transform: perspective(1500px) rotateY(-15deg);
  transition: transform 1s ease 0s;
  &:hover {
    transform: perspective(3000px) rotateY(-5deg);
  }
`;

export default function Perspective() {
  return (
    <div>
      <ImageCardLeft />
      <ImageCardRight />
    </div>
  );
}