1010–[CSS] Basic 3D Card Flipping

Background

We want to create the following CSS card flipping effect.

See the Pen 3D Card Flipping by Thomas Seng Hin Mak (@makzan) on CodePen.

Requirement

Given the following HTML:

<div class='card'>
    <div class='front face'>
        <img src='http://placehold.it/180x180'/>
    </div>
    <div class="back face">
        <p>This is back</p>
    </div>
</div>
<div class='card'>
    <div class='front face'>
        <img src='http://placehold.it/180x180'/>
    </div>
    <div class="back face">
        <p>This is back</p>
    </div>
</div>
<div class='card'>
    <div class='front face'>
        <img src='http://placehold.it/180x180'/>
    </div>
    <div class="back face">
        <p>This is back</p>
    </div>
</div>

Please implement the effect in CSS.

Help

❓ Show help content

Submission guideline

• You may use Codepen to implement it and submit the link.
• You may implement them in file and attach the HTML/CSS file via submission.