<h1 class="h1 font-weight-bold text-xs-center text-capitalize">iphone6 mockup</h1> <div class="wrap"> <div class="inner"> <div class="spbody"> <div class="parts1 parts"></div> <div class="parts2 parts"></div> <div class="parts3 parts"></div> <div class="parts4 parts"></div> <div class="partsbd"> <div class="partshd"> <div class="partsspe"></div> <div class="partscam"></div> </div> <div class="partsvw"> <div class="partsvw_inner"> <img src="http://placekitten.com/640/6000" alt=""> </div> </div> <div class="partsbtn"></div> </div> </div> </div> </div>
body { font-family: 'Dancing Script', cursive; background-image: linear-gradient(45deg, #F7CAC9 15%, #91A8D0 85%); } .h1 { margin: 1em; color: rgba(white, .85); } .wrap { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .inner { display: block; transform-style: preserve-3d; perspective: 1400px; transform: rotate3d(-1, 1, 0, 30deg); > div { transform-origin: center center 0px; animation: spin infinite 5s cubic-bezier(0.445,0.050,0.550,0.950); } } @keyframes spin { 0%, 20% { transform: rotateY(0); } 80%, 100% { transform: rotateY(360deg); } } $outline-color: #666; .spbody { width: 230px; margin: 60px; border-radius: 30px; position: relative; border: 1px solid $outline-color; } .partsbd { width: 190px; margin: 0 auto; } .partshd { height: 10px; margin: 30px 0; text-align: center; position: relative; } .partsbd { .partsspe, .partscam { border-radius: 10px; display: inline-block; position: absolute; left: 50%; border: 1px solid $outline-color; } .partsspe { top: 0; width: 8px; height: 8px; margin-left: -45px; } .partscam { top: 2px; width: 50px; height: 4px; margin-left: -25px; } } .partsvw { width: 100%; height: 300px; border: 1px solid $outline-color; overflow: hidden; } .partsvw_inner { width: calc(100% + 17px); height: 100%; padding-right: 17px; overflow: scroll; > img { max-width: 100%; vertical-align: bottom; } } .partsbtn { width: 40px; height: 40px; border-radius: 50%; margin: 15px auto; border: 1px solid $outline-color; } .parts { position: absolute; background: $outline-color; top: 50%; left: 50%; } .parts1 { width: 3px; height: 30px; margin: -130px 0 0 117px; } .parts2 { width: 3px; height: 15px; margin: -170px 0 0 -120px; } .parts3 { width: 3px; height: 20px; margin: -130px 0 0 -120px; } .parts4 { width: 3px; height: 20px; margin: -90px 0 0 -120px; }