apple-mockup

by uto usui

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<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>

SCSS

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:...

JavaScript

WebFontConfig = {
    google: { families: [ 'Dancing+Script:400,700:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();