0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p><b>Loading…</b>Everything will be ready in few seconds</p>
1
<p><b>Loading…</b>Everything will be ready in few seconds</p>
2
<ul><li>Theory</li>
2
<ul><li>Theory</li>
3
<li>Theory</li>
3
<li>Theory</li>
4
<li>Comments</li>
4
<li>Comments</li>
5
</ul><h2>The “stack” of cards</h2>
5
</ul><h2>The “stack” of cards</h2>
6
<p>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.</p>
6
<p>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.</p>
7
<h2>Comments</h2>
7
<h2>Comments</h2>
8
<ul><li>index.html</li>
8
<ul><li>index.html</li>
9
<li>style.css</li>
9
<li>style.css</li>
10
</ul><p>HTML</p>
10
</ul><p>HTML</p>
11
<p><!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></p>
11
<p><!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></p>
12
<p>CSS</p>
12
<p>CSS</p>
13
<p>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 { }</p>
13
<p>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 { }</p>
14
<p>Thanks! We’ll fix everything at once!</p>
14
<p>Thanks! We’ll fix everything at once!</p>
15
<p>The code has changed, click “Refresh” or turn autorun on.</p>
15
<p>The code has changed, click “Refresh” or turn autorun on.</p>
16
<p>You’ve gone to a different page</p>
16
<p>You’ve gone to a different page</p>
17
<p>Click inside the mini-browser to shift the focus onto this window.</p>
17
<p>Click inside the mini-browser to shift the focus onto this window.</p>
18
<p>100%</p>
18
<p>100%</p>
19
<ol><li>Rotate the .queen card 10° counterclockwise.</li>
19
<ol><li>Rotate the .queen card 10° counterclockwise.</li>
20
<li>Then rotate the .jack card 20° counterclockwise.</li>
20
<li>Then rotate the .jack card 20° counterclockwise.</li>
21
<li>And finally rotate the .ten card 30° counterclockwise.</li>
21
<li>And finally rotate the .ten card 30° counterclockwise.</li>
22
</ol>
22
</ol>