Apply a perspective transform with a hover animation to an element

user_18943198 0
Viewed 159

This looks like an easy one imo but I am missing something as I cant get it to run.

I want to use transform with the perspective() and rotateY() functions to create a perspective for the element. Then use a transition to update the transform attribute's value on hover. And change the rotateY() value to negative to mirror the perspective effect from left to right. The Codepen is here working and I am creating it in React .

My App.tsx that is not working

I declared all styles and apply 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 };
material-ui reactjs css html javascript
1 Answers

There are many different ways to do these styles in React, but one option that won't work is inline styles because you can't control the :hover styles using inline styles.

One option is to use CSS classes just like in your code pen. The only thing you need to change for React is class=... becomes 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>
  );
}

Edit perspective cards using CSS classes

Since you were trying to leverage MUI's Box, I'm guessing you might be trying to incorporate this in a project using MUI and perhaps you want to use CSS-in-JS approaches rather than global CSS class names. Below is an example using MUI's styled API. This would also look nearly identical using Emotion's styled API which MUI's implementation delegates to.

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>
  );
}

Edit perspective cards

user_74959300
Related