Basic Svelte
Introduction
Bindings
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
Stores
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
Like any other attribute, you can specify classes with a JavaScript attribute. Here, we could add a flipped class to the card:
App
<button
class="card {flipped ? 'flipped' : ''}"
onclick={() => flipped = !flipped}
>This works as expected — if you click on the card now, it’ll flip.
We can make it nicer though. Adding or removing a class based on some condition is such a common pattern in UI development that Svelte includes a special directive to simplify it:
App
<button
class="card"
class:flipped={flipped}
onclick={() => flipped = !flipped}
>This directive means ‘add the flipped class whenever flipped is truthy’.
previous next
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<script>
let flipped = $state(false);
</script>
<div class="container">
Flip the card
<button
class="card"
onclick={() => flipped = !flipped}>
<div class="front">
<span class="symbol">♠</span>
</div>
<div class="back">
<div class="pattern"></div>
</div>
</button>
</div>
<style>
.container {display: flex;
flex-direction: column;
gap: 1em;
height: 100%;
align-items: center;
justify-content: center;
perspective: 100vh;
}
.card {position: relative;
aspect-ratio: 2.5 / 3.5;
font-size: min(1vh, 0.25rem);
height: 80em;
background: var(--bg-1);
border-radius: 2em;
transform: rotateY(180deg);
transition: transform 0.4s;
transform-style: preserve-3d;
padding: 0;
user-select: none;
cursor: pointer;
}
.card.flipped {transform: rotateY(0);
}
.front, .back {display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
backface-visibility: hidden;
border-radius: 2em;
border: 1px solid var(--fg-2);
box-sizing: border-box;
padding: 2em;
}
.front {background: url(./svelte-logo.svg) no-repeat 5em 5em, url(./svelte-logo.svg) no-repeat calc(100% - 5em) calc(100% - 5em);
background-size: 8em 8em, 8em 8em;
}
.back {transform: rotateY(180deg);
}
.symbol {font-size: 30em;
color: var(--fg-1);
}
.pattern {width: 100%;
height: 100%;
background-color: var(--bg-2);
/* pattern from https://projects.verou.me/css3patterns/#marrakesh */
background-image:
radial-gradient(var(--bg-3) 0.9em, transparent 1em),
repeating-radial-gradient(var(--bg-3) 0, var(--bg-3) 0.4em, transparent 0.5em, transparent 2em, var(--bg-3) 2.1em, var(--bg-3) 2.5em, transparent 2.6em, transparent 5em);
background-size: 3em 3em, 9em 9em;
background-position: 0 0;
border-radius: 1em;
}
</style>