CSS Casino

            
              <!-- HTML -->
              <div class="card-container" >
                <div class="card">
                  <div class="front-card" id="ace"></div>
                  <div class="back-card"></div>
                </div>
              </div>

              <!-- CSS -->
              .card-container, .front-card, .back-card {
                width: 160px;
                height: 240px;
                display: inline-block;
              }

              .cards:hover .card {
                transform: rotateY(180deg);
              }

              .card {
                position: relative;
                transition: 0.5s;
                transform-style: preserve-3d;
              }

              .front-card, .back-card {
                position: absolute;
              }

              .back-card {
                background-image: url('../images/playing-card-back.png');
                background-size: 100% 100%;
                transform: rotateY(0deg);
              }

              .front-card {
                transform: rotateY(180deg);
                background-size: 100% 100%;
              }

              #ace {
                background-image: url('../images/Ace.png');
              }

            
              <!-- HTML -->
              <div class="cards-fan-container">
                <img src="./images/Ace.png" class="card-fan" id="ace-fan"/>
                <img src="./images/King.png" class="card-fan" id="king-fan"/>
                <img src="./images/Queen.png" class="card-fan" id="queen-fan"/>
                <img src="./images/Jack.png" class="card-fan" id="jack-fan"/>
                <img src="./images/Ten.png"
                class="card-fan" id="ten-fan"/>
              </div>

              <!-- CSS -->
              .card-fan {
                position: absolute;
                width: 200px;
                transform-origin: bottom;
                transition: all .3s linear;
              }

              .cards-fan-container:hover #ten-fan{
                transform: rotate(20deg)
              }
              .cards-fan-container:hover #ace-fan{
                transform: rotate(-20deg)
              }
              .cards-fan-container:hover #jack-fan{
                transform: rotate(10deg)
              }
              .cards-fan-container:hover #king-fan{
                transform: rotate(-10deg)
              }

            
              <!-- click and hold on the wheel to stop it! -->
              <!-- HTML -->
              <div class="window">
                <img src="./assets/vectors/roulette-wheel.svg" alt="roulette wheel"
                id="wheel"/>
              </div>

              <!-- CSS -->
              #wheel {
                width: 100%;
                cursor: pointer;
              }
              #wheel:hover {
                animation: wheel 1s linear 0s infinite;
              }

              #wheel:active {
                animation-play-state: paused;
              }

              @keyframes wheel {
                100% {
                  transform: rotateZ(360deg);
                }
              }

            
              <!-- HTML -->
              <img src="./assets/vectors/martini.svg" alt="martini" id="martini" />
              <!-- CSS -->
              #martini {
                max-width: 8%;
                display: inline-block;
                margin-left: 5%;
                cursor: pointer;
              }

              #martini:hover {
                animation: push 1.7s 1;
                animation-fill-mode: forwards;
              }

              @keyframes push {
                0% {
                  transform: translateY(0px);
                  animation-timing-function: ease-in;
                }
                50% {
                  transform: translateY(10px) translateX(5px) scale(1.25);
                  animation-timing-function: ease-out;
                }
                100% {
                  transform: translateY(20px) translateX(10px) scale(1.5);
                }
              }