<span id="trigger-office"></span> <span class="spacer"></span> <div class="viewport"> <div class="set-piece-wrapper"> <div class="set-rotate"></div> <!-- / This background rotates into position / --> <div class="set-screen"></div> <!-- / This background scales up from small to big / --> </div> <!-- .set-piece-wrapper --> </div> <!-- viewport -->
*, *:before, *:after { box-sizing: border-box; } .spacer { width: 100%; height: 400vh; display: block; } .viewport { width: 100vw; height: 100vh; display: block; position: fixed; top: 0; left: 0; } // Screen rotate and scale // ------------------------------------ / // Set piece screen - wrapper .set-piece-wrapper { width: 236px; height: 334px; display: block; margin: 0 auto; position: absolute; left: 50%; bottom: 270px; z-index: 10; } // Set piece which rotates .set-rotate { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-color: #d0e1e9; border-radius: 10px } // Set piece which scales in .set-screen { background-color: #b9d2d5; display: block; position: absolute; left: 50%; top: 65px; width: 300px; height: 204px; margin-left: -150px; border-radius: 6px; transform: scale(1); z-index: 2; }