I thought this would be an easy task, but I seem to be missing something as it doesn't work for me.
The goal is to use the perspective() and rotateY() functions in a transform to create a perspective effect on an element. Additionally, there should be a transition that updates the transform attribute's value on hover, changing the rotateY() value to negative for a mirroring effect from left to right.
You can find the working code on Codepen here. I am implementing this in React.
My App.tsx that isn't functioning properlyI have defined all styles and applied them inline.
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 };