Interactive online courses HTML Academy
2026-03-09 12:26 Diff
https://htmlacademy.org/courses/dynamic/2d-transforms/cards-stack

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The “stack” of cards

Let’s create a stack of cards for this assignment. These images are absolutely positioned without the use of any effects, and the layers are placed one on top of the other. Our task is to slightly rotate the cards in the underlying layers so that they peak out from underneath the upper layers. Use transform: rotate like you normally would.

Comments

  • index.html
  • style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>The “stack” of cards</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="deck"> <img class="ten" src="cards/10.png" alt="Ten"> <img class="jack" src="cards/jack.png" alt="Jack"> <img class="queen" src="cards/queen.png" alt="Queen"> <img class="king" src="cards/king.png" alt="King"> </div> </body> </html>

CSS

body { margin: 0; padding: 0; background-color: #f5f5f5; } .deck { position: relative; top: 150px; left: 50%; width: 110px; margin-left: -55px; } .deck img { position: absolute; transition: all 0.1s linear; transform-origin: 0 0; } .queen { } .jack { } .ten { }

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%

  1. Rotate the .queen card 10° counterclockwise.
  2. Then rotate the .jack card 20° counterclockwise.
  3. And finally rotate the .ten card 30° counterclockwise.