005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
import Box from '@mui/joy/Box';
|
|
import Card from '@mui/joy/Card';
|
|
import CardCover from '@mui/joy/CardCover';
|
|
import CardContent from '@mui/joy/CardContent';
|
|
import Typography from '@mui/joy/Typography';
|
|
|
|
export default function CardLayers3d() {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
perspective: '1000px',
|
|
transition: 'transform 0.4s',
|
|
'& > div, & > div > div': {
|
|
transition: 'inherit',
|
|
},
|
|
'&:hover': {
|
|
'& > div': {
|
|
transform: 'rotateY(30deg)',
|
|
'& > div:nth-child(2)': {
|
|
transform: 'scaleY(0.9) translate3d(20px, 30px, 40px)',
|
|
},
|
|
'& > div:nth-child(3)': {
|
|
transform: 'translate3d(45px, 50px, 40px)',
|
|
},
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Card
|
|
variant="outlined"
|
|
sx={{
|
|
minHeight: '280px',
|
|
width: 320,
|
|
backgroundColor: '#fff',
|
|
borderColor: '#000',
|
|
}}
|
|
>
|
|
<Typography level="h2" textColor="#000" sx={{ fontSize: 'lg' }}>
|
|
Card
|
|
</Typography>
|
|
<CardCover
|
|
sx={{
|
|
background:
|
|
'linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0) 200px), linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0) 300px)',
|
|
border: '1px solid',
|
|
borderColor: '#777',
|
|
backdropFilter: 'blur(1px)',
|
|
}}
|
|
>
|
|
<Typography level="h2" textColor="#fff" sx={{ fontSize: 'lg' }}>
|
|
Card Cover
|
|
</Typography>
|
|
</CardCover>
|
|
<CardContent
|
|
sx={{
|
|
alignItems: 'self-end',
|
|
justifyContent: 'flex-end',
|
|
background: 'linear-gradient(to top, rgba(0,0,0,0.3), rgba(0,0,0,0.3))',
|
|
border: '1px solid',
|
|
borderColor: '#000',
|
|
backdropFilter: 'blur(1px)',
|
|
}}
|
|
>
|
|
<Typography level="h2" textColor="#fff" sx={{ fontSize: 'lg', m: 2 }}>
|
|
Card Content
|
|
</Typography>
|
|
</CardContent>
|
|
</Card>
|
|
</Box>
|
|
);
|
|
}
|