Cards animation (base)

by ShaCP

HTML

<div id="card-container">
  <div class="card" id="one">
    <img class="top-card-image" src="http://localhost:3000/diamond.svg" />
    <img class="top-bottom-image" src="http://localhost:3000/diamond.svg" />
    <span>1</span>
  </div>
  <div class="card" id="two">
    <img class="top-card-image" src="http://localhost:3000/club.svg" />
    <img class="top-bottom-image" src="http://localhost:3000/club.svg" />
    <span>2</span>
  </div>
  <div class="card" id="three">
    <img class="top-card-image" src="http://localhost:3000/heart.svg" />
    <img class="top-bottom-image" src="http://localhost:3000/heart.svg" />
    <span>3</span>
  </div>
  <div class="card" id="four">
    <img class="top-card-image" src="http://localhost:3000/spade.svg" />
    <img class="top-bottom-image" src="http://localhost:3000/spade.svg" />
    <span>4</span>
  </div>
    <div class="card" id="five">
    <img class="top-card-image" src="http://localhost:3000/spade.svg" />
    <img class="top-bottom-image" src="http://localhost:3000/spade.svg" />
    <span>5</span>
  </div>
    <div class="card" id="six">
    <img class="top-card-image" src="http://localhost:3000/spade.svg" />
    <img class="top-bottom-image" src="http://localhost:3000/spade.svg" />
    <span>6</span>
  </div>
    <div class="card" id="seven">
    <img class="top-card-image" src="http://localhost:3000/spade.svg" />
    <img class="top-bottom-image" src="http://localhost:3000/spade.svg" />
    <span>7</span>
  </div>

CSS

html,
body {
  height: 100vh;
}

* {
  box-sizing: border-box;
}

body {
  display: flex;
  font-size: 3rem;
  justify-content: center;
  margin: 0;
  overflow: hidden;
}

#one {
  background-color: green;
  transform-origin: bottom;
  /* transform: rotateZ(-90deg); */
  animation-name: card-one;
}

#two {
  background-color: red;
  transform-origin: bottom;
  /* transform: rotateZ(-60deg); */
  animation-name: card-two;
}

#three {
  background-color: blue;
  transform-origin: bottom;
  /* transform: rotateZ(-30deg); */
  animation-name: card-three;
}

#four {
  background-color: yellow;
  transform-origin: bottom;
  /* transform: rotateZ(30deg); */
  animation-name: card-four;
}

#five {
  background-color: lightpink;
  transform-origin: bottom;
  /* transform: rotateZ(30deg); */
  animation-name: card-five;
}

#six {
  background-color: lightgreen;
  transform-origin: bottom;
  /* transform: rotateZ(60deg); */
  animation-name: card-six;
}

#seven {
  background-color: violet;
  transform-origin: bottom;
  /* transform: rotateZ(90deg); */
  animation-name: card-seven;
}

#card-container {
  --cardWidth: calc((100vw / 9) * 3);
  width: var(--cardWidth);
  /* height: var() */
  height: calc(var(--cardWidth) * 1.33);
  margin-bottom: 15%;
  align-self: flex-end;
  position: relative;
  background-color: lightskyblue;
  /* transform: rotateZ(90deg); */
  /* perspective: 200px; */
  /* transform: rotate3d(1, 1, 1, 45deg); */
  /* transform-style: preserve-3d; */
}

#card-container>div {
  position: absolute;
}

.card {
  width: 100%;
  height: 100%;
  display: flex;
  /* justify-content: center; */
  /* align-items: center; */
  animation-fill-mode: forwards;
  animation-duration: 1.65s;
  /* animation-iteration-count: infinite; */
  animation-timing-function: linear;
  top: 0;
  border-radius: 4px;
}

.card>span {
  font-size: 2rem;
  writing-mode: vertical-lr;
  display: flex;
  justify-content: center;
  /* could be replaced with just scale(1)
  not sure if that...