File size: 1,452 Bytes
1b72d7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
import React, { useState } from 'react'
/**
* 翻转组件
* @param {*} props
* @returns
*/
export default function FlipCard(props) {
const [isFlipped, setIsFlipped] = useState(false)
function handleCardFlip() {
setIsFlipped(!isFlipped)
}
return (
<div className={`flip-card ${isFlipped ? 'flipped' : ''}`} >
<div className={`flip-card-front ${props.className || ''}`} onMouseEnter={handleCardFlip}>
{props.frontContent}
</div>
<div className={`flip-card-back ${props.className || ''}`} onMouseLeave={handleCardFlip}>
{props.backContent}
</div>
<style jsx>{`
.flip-card {
width: 100%;
height: 100%;
display: inline-block;
position: relative;
transform-style: preserve-3d;
transition: transform 0.2s;
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
z-index: 2;
transform: rotateY(0);
}
.flip-card-back {
transform: rotateY(180deg);
}
.flip-card.flipped {
transform: rotateY(180deg);
}
`}</style>
</div>
)
}
|