Dia 19/2019 - Efeito de girar o cartão

Desafio #92daysofcode que fiz no final de 2019. Nesse artigo temos o dia 19, mostrando o uso da pseudo-classe :checked, com a função :not().

Pré-visualização

Código

Começamos com a estrutura do HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Day 19</title>
<style>
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; }
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
* { margin: 0; padding: 0; list-style: none; }
body { background: #eee; font-family: Arial, Helvetica, sans-serif; }
</style>
<link rel="stylesheet" type="text/css" href="./day-19.css">
</head>
<body>
<div class="container">
<!-- card -->
</div>
</body>
</html>
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
<ul class="deck">
<li>
<input class="input" id="item-1" type="checkbox">
<label class="label" for="item-1">
<img class="image" alt="" src="https://place-hold.it/300x300/999/fff">
<span class="description">Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
</label>
<span class="item"></span>
</li>
<li>
<input class="input" id="item-2" type="checkbox">
<label class="label" for="item-2">
<img class="image" alt="" src="https://place-hold.it/300x300/999/fff">
<span class="description">Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
</label>
<span class="item"></span>
</li>
<li>
<input class="input" id="item-3" type="checkbox">
<label class="label" for="item-3">
<img class="image" alt="" src="https://place-hold.it/300x300/999/fff">
<span class="description">Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
</label>
<span class="item"></span>
</li>
<li>
<input class="input" id="item-4" type="checkbox">
<label class="label" for="item-4">
<img class="image" alt="" src="https://place-hold.it/300x300/999/fff">
<span class="description">Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
</label>
<span class="item"></span>
</li>
<li>
<input class="input" id="item-5" type="checkbox">
<label class="label" for="item-5">
<img class="image" alt="" src="https://place-hold.it/300x300/999/fff">
<span class="description">Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
</label>
<span class="item"></span>
</li>
<li>
<input class="input" id="item-6" type="checkbox">
<label class="label" for="item-6">
<img class="image" alt="" src="https://place-hold.it/300x300/999/fff">
<span class="description">Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
</label>
<span class="item"></span>
</li>
</ul>
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
94
95
96
97
98
.deck { display: flex; flex-direction: row; flex-flow: row wrap; perspective: 4000px; }

.input { animation: step-end 0.8s; cursor: pointer; margin: 0 5px 10px; opacity: 0; z-index: 999; }

.label {
background: #fff;
color: #000;
box-shadow: 100px 30px 30px -10px rgba(0, 0, 0, 0.4);
filter: brightness(3);
text-decoration: none;
transform: translateX(160%) rotateY(-180deg);
transform-origin: -30% center;
}

.image {
background: #000;
display: block;
height: 80px;
margin: 5px auto 8px;
width: 100%;
}

.description { font-size: 12px; }

.item {
background: #531e8c;
background: linear-gradient(#531e8c, #160727);
border: 5px solid #f8fff9;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
transform: translateX(0%) rotateY(0deg);
transform-origin: 130% center;
filter: brightness(1);
}

.item:before,
.item:after {
content: '';
display: block;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
border-radius: inherit;
opacity: .3;
}

.item:after { background-position: calc(50% + 18px) calc(50% + 18px); }

.label,
.item {
backface-visibility: hidden;
border-radius: 4px;
cursor: pointer;
display: inline-block;
left: -5px;
margin-left: -200px;
text-align: center;
transition: all 0.8s;
transform-style: preserve-3d;
vertical-align: top;
z-index: 0;
}

.input,
.label,
.item { height: 150px; position: relative; width: 200px; }

.input:checked + .label,
.input:checked + .label + .item { z-index: 100; }

.input:focus + .label,
.input:focus + .label + .item { outline: 0; transition-property: transform, filter, box-shadow; z-index: 900; }

.input:checked + .label {
transform: translateX(0%) rotateY(0deg);
box-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
filter: brightness(1);
}

.input:checked + .label + .item {
transform: translateX(-160%) rotateY(180deg);
box-shadow: 80px 10px 20px -40px rgba(0, 0, 0, 0);
filter: brightness(0);
}

.input:checked { animation-name: _front; }
.input:not(:checked) { animation-name: _back; }

@keyframes _front {
0% { visibility: hidden; }
100% { visibility: visible; }
}

@keyframes _back {
0% { visibility: hidden; }
100% { visibility: visible; }
}

Conclusão

A postagem original pode ser vista no meu Instagram e o código está acessível no meu Github.

Ao fechar este aviso ou continuar navegando no site Nerd Calistênico, você aceita o uso de cookies.

Este site usa cookies para assegurar a melhor experiência para os nossos usuários. Consulte nossa política de privacidade.

Uma nova versão está disponível. Clique aqui para atualizar.