styles.css
Aus Infopedia
(Die Seite wurde neu angelegt: „/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of t…“) |
|||
| Zeile 1: | Zeile 1: | ||
| − | + | .flipcard:hover .flipcard-body, .flipcard:focus .flipcard-body { | |
| − | . | + | transform: rotateY(-180deg); |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | + | .flipcard-back { | |
| − | . | + | transform: rotateY(-180deg); |
| − | + | ||
| − | + | } | |
| − | + | ||
| − | + | .flipcard { | |
| − | + | perspective: 40rem; | |
| − | + | transition: z-index, transform 0.2s; | |
| + | transition-delay: 0.7s, 0s; | ||
| + | z-index: 0; | ||
| + | padding: 10px; | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | |||
| + | .flipcard:hover { | ||
| + | transition-delay: 0s; | ||
| + | z-index: 1; | ||
} | } | ||
| − | + | .flipcard:active { | |
| − | . | + | transform: scale(0.975); |
| − | |||
} | } | ||
| − | + | .flipcard-body { | |
| − | + | display: flex; | |
| − | + | transform-style: preserve-3d; | |
| − | + | transition: 0.7s transform; | |
| − | + | border-radius: 0.25rem; | |
| − | + | flex: 1; | |
| + | width: 250px; | ||
| + | height: 250px; | ||
| + | margin: auto; | ||
} | } | ||
| − | + | .flipcard-front, .flipcard-back { | |
| − | + | backface-visibility: hidden; | |
| − | + | min-width: 100%; | |
| − | + | display: flex; | |
| + | align-items: center; | ||
| + | background-color: white; | ||
| + | box-sizing: border-box; | ||
| + | border-radius: 0.25rem; | ||
} | } | ||
| − | + | .shadow, .flipcard-front, .flipcard-back { | |
| − | . | + | 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); |
| − | |||
| − | |||
| − | |||
} | } | ||
Version vom 3. März 2021, 21:54 Uhr
.flipcard:hover .flipcard-body, .flipcard:focus .flipcard-body {
transform: rotateY(-180deg);
}
.flipcard-back {
transform: rotateY(-180deg);
}
.flipcard {
perspective: 40rem;
transition: z-index, transform 0.2s;
transition-delay: 0.7s, 0s;
z-index: 0;
padding: 10px;
text-decoration: none;
}
.flipcard:hover {
transition-delay: 0s;
z-index: 1;
}
.flipcard:active {
transform: scale(0.975);
}
.flipcard-body {
display: flex;
transform-style: preserve-3d;
transition: 0.7s transform;
border-radius: 0.25rem;
flex: 1;
width: 250px;
height: 250px;
margin: auto;
}
.flipcard-front, .flipcard-back {
backface-visibility: hidden;
min-width: 100%;
display: flex;
align-items: center;
background-color: white;
box-sizing: border-box;
border-radius: 0.25rem;
}
.shadow, .flipcard-front, .flipcard-back {
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);
}
