react framer-motion 그랩시 이동하는 이미지

yarn add framer-motion

import { motion, useMotionValue, useTransform } from "framer-motion";
import styled from "styled-components";

const Example = () => {
    const x = useMotionValue(0);
    const y = useMotionValue(0);
    const rotateX = useTransform(y, [-100, 100], [30, -30]);
    const rotateY = useTransform(x, [-100, 100], [-30, 30]);
    
    return (
        <CardWrapper>
            <CardContainer
                style={{ x, y, rotateX, rotateY, z: 100 }}
                drag
                dragElastic={0.16}
                dragConstraints={{ top: 0, left: 0, right: 0, bottom: 0 }}
                whileTap={{ cursor: "grabbing" }}
            >
                    <ImgWrapper>
                        <Image
                            style={{ x, y, rotateX, rotateY }}
                            drag
                            dragElastic={0.12}
                            whileTap={{ cursor: "grabbing " }}
                        >
                            <img src="겐지" />
                        </Shoes>
                    </ImgWrapper>
            </CardContainer>
        </CardWrapper>
    )
}
export default NikeCard;

const CardWrapper = styled.div`
    width:100%;
    perspective: 2000;
    display:flex;
    align-items: center;
    justify-content: center;
`

const CardContainer = styled(motion.div)`
    width: 255px;
    height: 360px;
    cursor:grab;
    position:relative;
    border:1px solid #eee;
`

const ImgWrapper = styled.div`
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
`

const Image = styled(motion.div)`
    width: auto;
    height: 350px;
    z-index: 99;
    user-select: none;
    padding:0 0 40px 0;

    img{
        width: auto;
        height:100%;
        user-select:none;
    }
`

styled-components 필요 없는 부분은 잘라냈다. css는 알아서 꾸미면 된다.
perspective 는 원근법으로 그것만 넣어주면 됨.