Content added Content deleted
MarbleNiter (talk | contribs) (Flip Card Styling) |
MarbleNiter (talk | contribs) m (Replaced content with ".page-grid { display: grid; margin-bottom: 4em; }") Tag: Replaced |
||
Line 1: | Line 1: | ||
. |
.page-grid { |
||
display: grid; |
|||
width: 160px; |
|||
margin-bottom: 4em; |
|||
height: auto; |
|||
background: var(--color-surface-1); |
|||
border: 1px solid #ffffff1a; |
|||
/* perspective: 400px; */ |
|||
} |
|||
.flip-card-inner { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
transition: transform 0.8s; |
|||
/* transform-style: preserve-3d; */ |
|||
} |
|||
.flip-card:hover .flip-card-inner { |
|||
/* transform: rotateY(180deg); */ |
|||
} |
|||
.flip-card-front, .flip-card-back { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
/* -webkit-backface-visibility: hidden; */ |
|||
/* backface-visibility: hidden; */ |
|||
} |
|||
.flip-card-front { |
|||
color: #cff; |
|||
font-weight: 700; |
|||
font-size: 1.25em; |
|||
} |
|||
.flip-card-back { |
|||
background-color: var(--color-surface-2); |
|||
font-size: 0.8em; |
|||
/* transform: rotateY(180deg); */ |
|||
} |
} |