<div class="card-container">
<div class="card">
<div class="card__inner">
<div class="card__front card-bg-1 card-bg__size-small">
<div class="card__intro card__fullsize-unit">
<img decoding="async" src="https://cdn.w3bits.com/content/images/cartoon-fashionista-avatar.jpg" alt="Jane Doe's photo" class="card__avatar card__avatar--big card__avatar--full" />
</div>
</div>
<div class="card__back card-bg-dark">
<div class="card__details card__alignment card__alignment--bottom card__padded-unit card__fullsize-unit">
<h3 class="card__title title">Jane Doe</h3>
<p class="card__text medium-text">Fashion model, Food blogger, Cat momma.</p>
<address class="card__address tiny-text">Ontario, CA<br />(591) 239 991</address>
</div>
</div>
</div>
</div>
</div>
:root {
--accent: #ca9;
--card-front-bg: var(--surface-pri);
--card-back-bg: var(--surface-sec);
--card-front-text: var(--text-pri);
--card-back-text: var(--text-sec);
}
.card-container {
min-height: 100dvh;
display: grid;
place-items: center;
padding: 3rem;
}
.card {
perspective: 1000px;
}
.card:hover .card__inner,
.card:active .card__inner,
.card:focus .card__inner {
transform: rotateY(180deg);
}
.card,
.card__inner {
position: relative;
max-width: 300px;
width: 100%;
height: 320px;
}
.card__inner {
transition: transform .5s ease-in-out;
transform: translateZ(0);
transform-origin: 50% 50%;
transform-style: preserve-3d;
}
.card__back {
transform: rotateY(180deg);
}
.card__front,
.card__back {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
color: #888;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, .1);
backface-visibility: hidden;
}
.card__intro--center .card__avatar {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.card__alignment {
display: flex;
flex-direction: column;
}
.card__alignment--center {
justify-content: center;
align-items: center;
}
.card__alignment--vcenter {
justify-content: center;
}
.card__alignment--bottom {
justify-content: flex-end;
}
.card__banner {
overflow: hidden;
height: 50%;
}
.card__banner img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card__banner+.card__intro {
height: 50%;
}
.card__avatar {
backface-visibility: hidden;
}
.card__avatar:not(.card__avatar--full) {
width: 6em;
height: 6em;
border-radius: 50%;
}
.card__avatar--full {
object-fit: cover;
height: 100%;
}
.card__avatar--bordered {
padding: 4px;
border: 2px dashed;
}
.card__avatar--bordered-solid {
border: 7px solid white;
}
.card__title,
.card__subtitle,
.card__text,
.card__address {
margin-top: 0;
margin-bottom: 0;
}
.card__title:not(:last-child):not(.margin-collapse),
.card__subtitle:not(:last-child):not(.margin-collapse),
.card__text:not(:last-child):not(.margin-collapse),
.card__address:not(:last-child):not(.margin-collapse) {
margin-bottom: 1em;
}
.card__address {
font-style: normal;
}
.card__address--bordered {
padding-top: 1em;
border-top: 1px solid rgba(0, 0, 0, .05);
}
.card__avatar+.card__title,
.card__avatar+.card__subtitle {
padding-top: .5rem;
}
.card__padded-unit {
padding: 2em;
}
.card__padded-unit-small {
padding: 1em;
}
.card__fullsize-unit {
height: 100%;
}
