CelestialModel/flipCards.css at main · RubinInsert/CelestialModel · GitHub

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
/* https://www.w3schools.com/howto/howto_css_flip_card.asp */
.flip-card {
    background-color: transparent;
    width: 100%;
    height: 100%;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    cursor: pointer;
  }
  @keyframes flipForward {
    0% { transform: scale(1) }
    50% { transform: scale(0.8); }
    100% { transform: scale(1) rotateY(180deg); }
  }
  @keyframes flipBack {
    0% { transform: scale(1) rotateY(180deg); }
    50% { transform: scale(0.8); }
    100% { transform: scale(1) rotateY(0deg); }
  }
  @keyframes clipIn { /* Hack to reduce visibility of backside when first loaded on clicking an element*/
    0% { filter: opacity(0); }
    70% { filter: opacity(0); }
    100% { filter: opacity(1); }
  }
  @keyframes wobble {
    0% { transform: translateX(0); }
    15% { transform: translateX(-6px) rotate(-5deg); }
    30% { transform: translateX(6px) rotate(5deg); }
    45% { transform: translateX(-4px) rotate(-3deg); }
    60% { transform: translateX(4px) rotate(3deg); }
    75% { transform: translateX(-2px) rotate(-1deg); }
    100% { transform: translateX(0); }
  }
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    border-radius: 1vw;
    animation: flipBack 1s;
    filter: drop-shadow(0 0 0.2rem black); /* Add shadow to flipcard to indicate interactiveness */
  }
  /* Do an horizontal flip when you move the mouse over the flip box container */
   .flipped .flip-card-inner{
    transform: rotateY(180deg);
    animation: flipForward 1s;
    filter: none; /* Drop shadow breaks flip animation and must be removed when being flipped */
  }

  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    border-radius: 1vw;
    animation: clipIn 1s;
  }

  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: #0D1321;

  }

  /* Style the back side */
  .flip-card-back {
    transform: rotateY(180deg);
    background-color: #3E5C76;
  }
  .flip-card-icon {
    width: 2rem;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    animation: wobble 1s ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
  }