1016–[CSS] 3D Greeting Card effect

Background

In this project, we want to create a 3D greeting card effect. The greeting card opens when user hovers on it. Here is the result preview:

See the Pen CSS Greeting Card effect by Thomas Seng Hin Mak (@makzan) on CodePen.

Requirement

Please use the following HTML code for your project. You should not modify the HTML code.

<h1>Greeting Card</h1>
<div class='cards'>
    <div class='card'>
        <div class='front face'>
            <img src='http://placehold.it/180x180&text=To: Thomas'/>
        </div>
        <div class="back face">
            <h2>Happy Birthday!</h2>
        </div>
    </div>
</div>

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.