| 4 | import styles from './styles.module.css' |
| 5 | |
| 6 | export default function App() { |
| 7 | const [flipped, set] = useState(false) |
| 8 | const { transform, opacity } = useSpring({ |
| 9 | opacity: flipped ? 1 : 0, |
| 10 | transform: `perspective(600px) rotateX(${flipped ? 180 : 0}deg)`, |
| 11 | config: { mass: 5, tension: 500, friction: 80 }, |
| 12 | }) |
| 13 | return ( |
| 14 | <div className={styles.container} onClick={() => set(state => !state)}> |
| 15 | <a.div |
| 16 | className={`${styles.c} ${styles.back}`} |
| 17 | style={{ opacity: opacity.to(o => 1 - o), transform }} |
| 18 | /> |
| 19 | <a.div |
| 20 | className={`${styles.c} ${styles.front}`} |
| 21 | style={{ |
| 22 | opacity, |
| 23 | transform, |
| 24 | rotateX: '180deg', |
| 25 | }} |
| 26 | /> |
| 27 | </div> |
| 28 | ) |
| 29 | } |