51 lines
988 B
TypeScript
51 lines
988 B
TypeScript
import styled from '@emotion/styled'
|
|
import { css, keyframes } from '@emotion/react'
|
|
import FloatingElement from './FloatingElement'
|
|
|
|
const fadeIn = keyframes`
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
`
|
|
|
|
export const FlipCard = styled.div`
|
|
background-color: transparent;
|
|
height: 100%;
|
|
perspective: 1000px;
|
|
`
|
|
|
|
export const FlipCardInner = styled.div<any>`
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
transition: transform 0.8s ease-out;
|
|
transform-style: preserve-3d;
|
|
transform: ${({ flip }) => (flip ? 'rotateY(0deg)' : 'rotateY(180deg)')};
|
|
`
|
|
|
|
export const FlipCardFront = styled.div`
|
|
width: 100%;
|
|
@media screen and (min-width: 768px) {
|
|
height: 100%;
|
|
position: absolute;
|
|
}
|
|
`
|
|
|
|
export const FlipCardBack = styled.div`
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: rotateY(180deg);
|
|
`
|
|
|
|
export const StyledFloatingElement = styled(FloatingElement)`
|
|
animation: ${css`
|
|
${fadeIn} 1s linear
|
|
`};
|
|
`
|