@import url(http://fonts.lug.ustc.edu.cn/css?family=Open+Sans:400,700,600,300,800);

body {
  font-family: 'Open Sans';
  background: beige;
}

figure {
  position: relative;
  width: 375px;
  height: 350px;
  margin: 30px auto;
  transform-style: preserve-3d;
  transform: perspective(800px);
  transition: all .3s ease;
  &.active {
    transform: rotateY(180deg);
  }
  .side-a, .side-b {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: dodgerblue;
    backface-visibility: hidden;
  }
  .side-a {
    section {
      margin: 15px 18px 0;
      h1 {
        font-size: 54px;
        font-weight: 800;
        line-height: 1.5;
        color: #333;
      }
      a {
        font-size: 18px;
        font-weight: 400;
        line-height: 2;
        color: #eee;
        cursor: pointer;
        &:hover {
          color: #ccc;
        }
      }
    }
  }
  .side-b {
    transform: rotateY(180deg);
    color: #333;
    span {
      position: absolute;
      top: -6px;
      right: -25px;
      font-size: 30px;
      cursor: pointer;
    }
    section {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      h2 {
        font-size: 33px;
        font-weight: 600;
        line-height: 1.75;
        white-space: nowrap;
      }
      p {
        font-size: 22px;
        font-weight: 400;
        line-height: 2;
        &:nth-child(3), &:nth-child(4) {
          font-size: 16px;
          line-height: 1.25;
        }
      }
    }
  }
}