dt2/spring-cloud/server-page/src/main/resources/static/lbzd/css/style.css

          * {
              margin: 0;
              padding: 0;
          }
          
          html {
              height: 100%;
              overflow: hidden;
          }
          
          body {
              width: 100%;
              height: 100%;
              background: url(../img/1.png) 75% center no-repeat;
              background-size: 92% 90%;
          }
          
          h1 {
              text-align: center;
          }
          
          .scene {
              width: 45%;
              height: 90%;
              margin: 4% 0% 0% 52%;
              perspective: 1000px;
          }
          
          .book {
              position: relative;
              width: 100%;
              height: 100%;
              transform-style: preserve-3d;
          }
          
          .page {
              cursor: pointer;
              position: absolute;
              color: black;
              width: 100%;
              height: 100%;
              transition: 1.5s transform;
              transform-style: preserve-3d;
              transform-origin: left center;
          }
          /* new */
          
          .front,
          .back {
              position: absolute;
              width: 85%;
              height: 85%;
              top: 3%;
              right: 5%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              box-sizing: border-box;
              backface-visibility: hidden;
              background-color: #FFFFFF;
          }
          
          .back {
              transform: rotateY(180deg);
          }
          
          .back>img {
              width: 100%;
              margin-bottom: 1%;
          }
          
          .back>span {
              display: inline-block;
              width: 100%;
              height: 6%;
              text-align: center;
              line-height: 100%;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              font-size: 18px;
              background: url(../img/kk.png) top center no-repeat;
              background-size: auto 100%;
          }
          /* new */
          
          .front>img {
              width: 100%;
              margin-bottom: 1%;
          }
          
          .front>span {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 10%;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              font-size: 18px;
              background: url(../img/kk.png) top center no-repeat;
              background-size: auto 100%;
          }
          
          .page.active {
              z-index: 1;
          }
          
          .page.flipped {
              transform: rotateY(-180deg);
          }
          
          .page.flipped:last-of-type {
              z-index: 1;
          }
          
          p {
              margin: 0 0 0.1em;
              text-indent: 1em;
          }
          
          .qr {
              margin: 50px auto;
              max-width: 50%;
          }
          
          .qr img {
              display: block;
          }
          /* iPads (portrait) ----------- */
          
          @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
              .scene {
                  width: 90%;
                  height: 90%;
                  margin: 5%;
              }
          }