<div class="wrapper">
  <div class="cardWrapper">
    <div class="rotate">
      <div class="back">
        <div class="background">
          <div class="headerWrapper">
            <div class="title">Florida</div>
            <div class="subtitle">Avenue</div>
          </div>

          <div class="bodyWrapper">
            <div class="mortgagedWrapper">
              Mortgaged </br>for $175
            </div>
            <div class="description">card must be turned this side up if property is mortgaged</div>
          </div>
        </div>
      </div>
      <div class="front">
        <div class="background">
          <div class="headerWrapper">
            <div class="title">title deed</div>
            <div class="avenue">Florida Ave.</div>
          </div>

          <div class="bodyWrapper">
            <div class="rent">Rent $35.</div>
            <div class="priceWrapper">
              <div>With 1 House</div>
              <div><span class="sign">$</span>175.</div>
            </div>
            <div class="priceWrapper">
              <div>With 2 Houses</div>
              <div>500.</div>
            </div>
            <div class="priceWrapper">
              <div>With 3 Houses</div>
              <div>1100.</div>
            </div>
            <div class="priceWrapper">
              <div>With 4 Houses</div>
              <div>1300.</div>
            </div>

            <div class="descriptionWrapper">
              <div>With HOTEL $1500.</div>
              <div>With Skyscraper $2500.</div>
              <div class="description morgage">Morgage Value $175.</div>
              <div>Houses cost $200. each</div>
              <div>Hotels, $200. plus houses</div>
              <div>Skyscraper, $200. plus 1 hotel</div>
            </div>

            <div class="note">
              If a player owns ALL the lots of any Color-Group, the rent is TRIPLED on unimproved lots in that group, or DOUBLED if all but one lot is owned.
            </div>
            <div class="note">
              2005 Hasbro. 44167-C2
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<a class="author" href="https://itsmenatalie.com" target="_blank">Created by ItsMeNatalie</a>
body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
  overflow: hidden;

  .wrapper {
    position: relative;
    height: 475px;
    width: 345px;
    display: flex;
    align-items: center;
    justify-content: center;

    .cardWrapper {
      display: flex;
      flex-direction: column;
      perspective: 500px;
      cursor: pointer;
      width: 100%;
      height: 100%;

      &:hover {
        .rotate {
          transform: rotateY(180deg) translate3d(0, 0, 0);
          box-shadow: 5px -10px 15px 0 rgba(0, 0, 0, 0.5);
        }
      }

      .rotate {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: all 1s ease-in-out;
        perspective: 1000px;

        .front,
        .back {
          position: absolute;
          height: 435px;
          padding: 20px;
          background-color: white;
          box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
          overflow: hidden;
          font-family: "Poppins", sans-serif;
          backface-visibility: hidden;
        }

        .front {
          z-index: 1;
          transform: rotateY(180deg);

          .background {
            width: 280px;
            padding: 10px;
            border: 2px solid #222;

            .headerWrapper {
              text-align: center;
              background-color: #1a51b3;
              color: white;
              border: 3px solid #222;
              text-transform: uppercase;
              padding: 20px 5px 5px;
              font-weight: bold;

              .title {
                font-size: 10px;
                letter-spacing: 3px;
                line-height: 8px;
              }

              .avenue {
                font-size: 24px;
              }
            }

            .bodyWrapper {
              font-size: 15px;
              .rent {
                padding-top: 5px;
                text-align: center;
                font-weight: light;
              }
              .priceWrapper {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-left: 11px;

                .sign {
                  padding-right: 30px;
                }
              }

              .descriptionWrapper {
                padding-bottom: 10px;
                text-align: center;

                .morgage {
                  padding-top: 5px;
                }
              }

              .note {
                padding: 0 10px;
                font-size: 10px;
                font-weight: lighter;
                text-align: center;
              }
            }
          }
        }

        .back {
          z-index: 2;
          transform: rotateY(0deg);

          .background {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            width: 280px;
            padding: 10px;
            border: 2px solid #222;
            height: 410px;
            text-align: center;
            text-transform: uppercase;

            .headerWrapper {
              font-weight: bolder;

              .title {
                font-size: 50px;
              }

              .subtitle {
                font-size: 35px;
                line-height: 15px;
              }
            }

            .bodyWrapper {
              padding: 0 10px;

              .mortgagedWrapper {
                padding-bottom: 10px;
                line-height: 18px;
              }

              .description {
                letter-spacing: 2px;
                font-size: 12px;
                line-height: 12px;
              }
            }
          }
        }
      }
    }
  }

  a {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    position: absolute;
    left: calc(50% - 96px);
    bottom: 0;
    font-style: italic;
    font-size: 12px;
    color: #212121;
    background-color: white;
    padding: 10px 20px;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.