styles.css
Aus Infopedia
K |
|||
| Zeile 1: | Zeile 1: | ||
| − | + | .flip-card { | |
perspective: 40rem; | perspective: 40rem; | ||
| − | |||
| − | |||
| − | |||
padding: 10px; | padding: 10px; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
| − | + | .flip-card-inner { | |
| − | |||
display: flex; | display: flex; | ||
transform-style: preserve-3d; | transform-style: preserve-3d; | ||
transition: transform 0.5s; | transition: transform 0.5s; | ||
| − | |||
border-radius: 0.25rem; | border-radius: 0.25rem; | ||
flex: 1; | flex: 1; | ||
| Zeile 22: | Zeile 17: | ||
} | } | ||
| − | + | .flip-card:active { | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
transform: scale(0.975); | transform: scale(0.975); | ||
} | } | ||
| − | + | body.hasHover .flip-card:hover .flip-card-inner, .flip-card:focus .flip-card-inner { | |
| − | + | transform: rotateY(-180deg); | |
| − | transform: | ||
} | } | ||
| − | + | .flip-card-front, .flip-card-back { | |
backface-visibility: hidden; | backface-visibility: hidden; | ||
min-width: 100%; | min-width: 100%; | ||
| Zeile 43: | Zeile 32: | ||
box-sizing: border-box; | box-sizing: border-box; | ||
border-radius: 0.25rem; | border-radius: 0.25rem; | ||
| − | |||
} | } | ||
| − | |||
.flip-card-front { | .flip-card-front { | ||
background-color: #818A91; | background-color: #818A91; | ||
color: black; | color: black; | ||
} | } | ||
| − | + | .flip-card-back { | |
| − | |||
background-color: #bbb; | background-color: #bbb; | ||
color: black; | color: black; | ||
| − | transform: rotateY( | + | transform: rotateY(180deg) translateX(250px); |
} | } | ||
Version vom 3. Oktober 2021, 07:14 Uhr
.flip-card {
perspective: 40rem;
padding: 10px;
text-decoration: none;
}
.flip-card-inner {
display: flex;
transform-style: preserve-3d;
transition: transform 0.5s;
border-radius: 0.25rem;
flex: 1;
width: 250px;
height: 250px;
margin: auto;
text-align: center;
box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04), 0 2px 2px rgba(0, 0, 0, 0.04), 0 4px 4px rgba(0, 0, 0, 0.04), 0 8px 8px rgba(0, 0, 0, 0.04), 0 16px 16px rgba(0, 0, 0, 0.04);
}
.flip-card:active {
transform: scale(0.975);
}
body.hasHover .flip-card:hover .flip-card-inner, .flip-card:focus .flip-card-inner {
transform: rotateY(-180deg);
}
.flip-card-front, .flip-card-back {
backface-visibility: hidden;
min-width: 100%;
display: flex;
align-items: center;
background-color: white;
box-sizing: border-box;
border-radius: 0.25rem;
}
.flip-card-front {
background-color: #818A91;
color: black;
}
.flip-card-back {
background-color: #bbb;
color: black;
transform: rotateY(180deg) translateX(250px);
}
