0
136
VistasAplicar una transformación de perspectiva con una animación de desplazamiento a un elemento
En mi opinión, esto parece fácil, pero me falta algo porque no puedo hacer que funcione.
Quiero usar transformar con las funciones de perspective() y rotateY() para crear una perspectiva para el elemento. Luego use una transición para actualizar el valor del atributo de transformación al pasar el mouse. Y cambie el valor de rotateY() a negativo para reflejar el efecto de perspectiva de izquierda a derecha. El Codepen está aquí funcionando y lo estoy creando en React.
My App.tsx that is not working
Declaré todos los estilos y los apliqué en línea.
import React from 'react'; import { Box } from '@mui/material'; const styles = { imageCard: { display: ' inline-block', boxSizing: 'border-box', margin: '1rem', width: '240px', height: '320px', padding: '8px', borderRadius: '1rem', background: 'url(https://picsum.photos/id/1049/240/320)', boxShadow: 'rgba(0, 0, 0, 0.25) 0px 25px 50px -12px', }, perspectiveLeft: { transform: 'perspective(1500px) rotateY(15deg)', transition: 'transform 1s ease 0s', }, 'perspectiveLeft:hover': { transform: 'perspective(3000px) rotateY(5deg)', }, perspectiveRight: { transform: 'perspective(1500px) rotateY(-15deg)', transition: 'transform 1s ease 0s', }, 'perspectiveRight:hover': { transform: 'perspective(3000px) rotateY(-5deg)', }, }; function Perspective() { return ( <Box styles={styles.imageCard}> <Box style={styles.perspectiveLeft}></Box> <Box style={styles.perspectiveRight}></Box> </Box> ); } export { Perspective };1 Respuestas
Responde la pregunta0
Hay muchas maneras diferentes de hacer estos estilos en React, pero una opción que no funcionará son los estilos en línea porque no puedes controlar los estilos :hover usando estilos en línea.
Una opción es usar clases CSS como en su lápiz de código. Lo único que necesita cambiar para React es class=... se convierte en 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> ); } 
Dado que estaba tratando de aprovechar Box de MUI, supongo que podría estar tratando de incorporar esto en un proyecto usando MUI y tal vez quiera usar enfoques CSS-in-JS en lugar de nombres de clase CSS globales. A continuación se muestra un ejemplo que usa la API styled de MUI. Esto también se vería casi idéntico usando la API de styled de Emotion a la que delega la implementación de MUI.
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> ); }