Tengo el ejemplo de trabajo para rotar una imagen al pasar el mouse aquí
Utiliza propiedades de escala (), rotar () y transición cuando se desplaza sobre el elemento principal para animar la imagen. Y desbordamiento: oculto en el elemento principal para ocultar el exceso de la transformación de la imagen.
Cuando trato de replicar el mismo efecto en React, veo la imagen, pero la imagen no gira cuando paso el mouse. Pero es todo lo mismo? ¿Que me estoy perdiendo aqui?
import React from 'react'; import { Box } from '@mui/material'; import Image from 'mui-image'; const styles = { hoverRotate: { overflow: 'hidden', margin: '8px', minWidth: '240px', maxWidth: '320px', width: '100%', }, 'hoverRotate img': { transition: 'all 0.3s', boxSizing: 'border-box', maxWidth: '100%', }, 'hoverRotate:hover img': { transform: 'scale(1.3) rotate(5deg)', }, }; function Rotate() { return ( <Box style={styles.hoverRotate}> <Image src="https://picsum.photos/id/669/600/800.jpg" /> </Box> ); } export { Rotate };Esta forma de estilo no detecta los desplazamientos, por lo tanto, use useState para establecer el estado de desplazamiento de la imagen (impórtela usando import { useState } from "react"; )
const [isHover, setIsHover] = useState(false); Ahora, verifique si el Box está suspendido o no, si está suspendido, establezca isHover en true , si no está suspendido, configúrelo en false .
<Box style={styles.hoverRotate} onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)} > {/* code */} </Box> Mueva sus styles a la función Rotate . No está asignando la tecla "hoverRotate img" a ninguno de los estilos, por lo tanto, no se aplica. Así que cambie su nombre a algo como image y agregue el código de desplazamiento condicionalmente como se muestra a continuación. La razón para mover styles a la función Rotate para que isHover permanezca dentro del alcance para obtener su valor.
const styles = { hoverRotate: { overflow: "hidden", margin: "8px", minWidth: "240px", maxWidth: "320px", width: "100%" }, image: { transition: "all 0.3s", boxSizing: "border-box", maxWidth: "100%", transform: isHover && "scale(1.3) rotate(5deg)" } }; Finalmente, establezca el estilo de image en Image
<Image src="https://picsum.photos/id/669/600/800.jpg" style={styles.image} />Mira este sandbox: https://codesandbox.io/s/distracted-matan-c43ufb?file=/src/App.js:829-928
Con la nueva solución de estilo @mui/system ( sx prop), solo necesita pasar el objeto de estilos a la propiedad sx :
import React from "react"; import { Box } from "@mui/material"; const boxSx = { overflow: "hidden", margin: "8px", minWidth: "240px", maxWidth: "320px", width: "100%", "& > img": { transition: "all 0.3s", boxSizing: "border-box", maxWidth: "100%" }, "&:hover > img": { transform: "scale(1.3) rotate(5deg)" } }; function Rotate() { return ( <Box sx={ boxSx }> <img src="https://picsum.photos/id/669/600/800.jpg" /> </Box> ); } export { Rotate }; Si te falta la antigua solución de estilo @mui/styles (ahora en desuso) , te falta makeStlyes y luego pasas los estilos resultantes a la propiedad className :
import React from "react"; import Box from "@material-ui/core/Box"; import makeStyles from "@material-ui/core/styles/makeStyles"; const useStyles = makeStyles({ hoverRotate: { overflow: "hidden", margin: "8px", minWidth: "240px", maxWidth: "320px", width: "100%", "& > img": { transition: "all 0.3s", boxSizing: "border-box", maxWidth: "100%" }, "&:hover > img": { transform: "scale(1.3) rotate(5deg)" } } }); function Rotate() { const styles = useStyles(); return ( <Box className={ styles.hoverRotate }> <img src="https://picsum.photos/id/669/600/800.jpg" /> </Box> ); } export { Rotate };