blob: f648df3e4bb66feec89b028428ba1d91fc895e8b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 635 889">
<defs>
<pattern id="Diagonals" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M0 0 L20 20" class="inner"/>
<path d="M20 0 L0 20" class="inner"/>
</pattern>
<style type="text/css"><![CDATA[
.scene { perspective: 100cm; }
.card {
transform: translateZ(-10cm) rotateY(0);
transform-origin: center center;
transform-style: preserve-3d;
transition: 300ms transform;
cursor: pointer;
user-select: none;
perspective: inherit;
font-family: sans-serif;
font-weight: bold;
}
.card.flipped { transform: translateZ(-10cm) rotateY(180deg); }
.side { backface-visibility: hidden; transform-origin: center center; }
.front { transform: rotateY(180deg); }
.back { transform: rotateY(0deg); }
.corner { font-size: 64px; text-anchor: middle; }
.corner.top-left { dominant-baseline: hanging; }
.corner.bottom-right {}
.center { font-size: 180px; text-anchor: middle; dominant-baseline: middle; }
.inner { stroke: #cef3be; stroke-width: 2; }
.outer { fill: url(#Diagonals); stroke: #3e632f; stroke-width: 4; }
]]></style>
</defs>
<g class="scene">
<g class="card" onclick="flip(this)">
<g class="side front">
<!-- ♠ ♥ ♦ ♣ -->
<rect width="635" height="889" rx="35" fill="white"/>
<text class="corner top-left" x="50" y="40">5</text>
<text class="corner top-left" x="50" y="104">♣</text>
<text class="corner bottom-right" x="585" y="785">♣</text>
<text class="corner bottom-right" x="585" y="849">5</text>
<text class="center" x="177.5" y="130">♣</text>
<text class="center" x="177.5" y="789">♣</text>
<text class="center" x="317.5" y="450">♣</text>
<text class="center" x="457.5" y="130">♣</text>
<text class="center" x="457.5" y="789">♣</text>
</g>
<g class="side back">
<rect width="635" height="889" rx="35" fill="white"/>
<rect width="595" height="849" rx="25" x="20" y="20" class="outer"/>
</g>
</g>
</g>
<script><![CDATA[
function flip(element) { element.classList.toggle("flipped"); }
]]></script>
</svg>
|
