smskr-test.html

<style>
  	  @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
	
	  html{
	    height:100%;
	  }
	
	  body {
	    font-family: 'Open Sans', sans-serif;
	    height:100%;
	    color:#fff;
		background: #1b1b1b!important;
	  }
	  
	  #container{
		background: #1b1b1b!important;	  
	  }
	  
	  /*Basic Phone styling*/
	  
	  .phone {
	    border: 40px solid #121212;
	    border-width: 55px 7px;
	    border-radius: 40px;
	    margin: 50px auto;
	    overflow: hidden;
	    -webkit-transition: all 0.5s ease;
	    transition: all 0.5s ease;
	   -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
	       -moz-animation: fadein 2s; /* Firefox < 16 */
	        -ms-animation: fadein 2s; /* Internet Explorer */
	         -o-animation: fadein 2s; /* Opera < 12.1 */
	            animation: fadein 2s;
	}
	  
	  .phone iframe {
	    border: 0;
	    width: 100%;
	    height: 100%;
	    background-color:#000;
	  }
	  
	  /*Different Perspectives*/
	  
	  /* Table View */
	  .phone.view_1 {
	    -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);
	            transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);
	    box-shadow: -3px 3px 0 #000, -6px 6px 0 #000, -9px 9px 0 #000, -12px 12px 0 #000, -14px 10px 20px #000;
	  }
	 /*  Front View */
	  .phone.view_2 {
	    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	    box-shadow: 0px 3px 0 #000, 0px 4px 0 #000, 0px 5px 0 #000, 0px 7px 0 #000, 0px 10px 20px #000;
	  }


	@-webkit-keyframes rotate {
	
	    0%{-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);}
	    50%{-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-40deg);}
	    100%{-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);}
	}

	/* Rotate Animation */
	
	.view_1.rotate
	{
	    -webkit-animation-name:            rotate; 
	    -webkit-animation-duration:        15s; 
	    -webkit-animation-iteration-count: infinite;
	    -webkit-animation-timing-function: linear;
	}


  /*Controls*/
  
  #controls {
    position: absolute;
    top: 80px;
    left: 20px;
    font-size: 0.9em;
    color: #333;
    width:17px;
  }
  
  #controls div {
    margin: 10px;
  }
  
  #controls div label {
    width: 150px;
    display: block;
    float: left;
    color: #fff;
  }

  #phone-controls{
    position: absolute;
    top: 80px;
    right: 20px;
    width: 200px;
    font-size:14px;
  }

  #phones {
    border-top:1px solid #fff;
    margin-top:20px;
    padding-top:20px;
  }

  #phones button {
    outline: none;
    width: 198px;
    border: 1px solid #016aa0;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -o-border-radius:5px;
    background-color: #016aa0;
    height: 40px;
    margin: 10px 0;
    color: #fff;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  
  #phones button:hover {
    color: #444;
    background-color: #eee;
  }
  
  #views button {
    outline: none;
    width: 198px;
    border: 1px solid #00a8ff;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -o-border-radius:5px;
    background-color: #00a8ff;
    height: 40px;
    margin: 10px 0;
    color: #fff;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  
  #views button:hover {
    color: #444;
    background-color: #eee;
  }
  
  @media (max-width:900px) {
    #wrapper {
      -webkit-transform: scale(0.8, 0.8);
              transform: scale(0.8, 0.8);
    }
  }
  
  @media (max-width:700px) {
    #wrapper {
      -webkit-transform: scale(0.6, 0.6);
              transform: scale(0.6, 0.6);
    }
    .phone { margin: 0 0 0 -70px; }
  }
  
  @media (max-width:500px) {
    #wrapper {
      -webkit-transform: scale(0.4, 0.4);
              transform: scale(0.4, 0.4);
    }
  }

/* Fade In Animation */

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {

    
    
  /*Only needed for the controls*/
phone = document.getElementById("phone_1"),
iframe = document.getElementById("frame_1");


/*View*/
function updateView(view) {
  if (view) {
    phone.className = "phone view_" + view;
  }
}

/*Controls*/
function updateIframe() {

  // preload iphone width and height
  phone.style.width = "375px";
  phone.style.height = "667px";

  /*Idea by /u/aerosole*/
  document.getElementById("wrapper").style.perspective = (
    document.getElementById("iframePerspective").checked ? "1300px" : "none"
  );

}

updateIframe();

/*Events*/
document.getElementById("controls").addEventListener("change", function() {
  updateIframe();
});

document.getElementById("views").addEventListener("click", function(evt) {
  updateView(evt.target.value);
});

document.getElementById("phones").addEventListener("click", function(evt) {

  if(evt.target.value == 1){
    // iphone 6
    width = 375;
    height = 667; 
  }

  if(evt.target.value == 2){
    // samsung
    width = 400;
    height = 640; 
  }

  if(evt.target.value == 3){
    // microsoft
    width = 320;
    height = 480;  
  }

  if(evt.target.value == 4){
    // htc
    width = 360;
    height = 640; 
  }

  if(evt.target.value == 5){
    // ipad mini
    width = 768;
    height = 1024; 
  }

    phone.style.width = width + "px";
    phone.style.height = height + "px"; 

});


 iframe = document.getElementById('frame_1');

  if (iframe.attachEvent){
      iframe.attachEvent("onload", function(){
          afterLoading();
      });
  } else {
      iframe.onload = function(){
          afterLoading();
      };
  }

function afterLoading(){

    setTimeout(function() {
        phone.className = "phone view_1";
        setTimeout(function() {
            // do second thing
            phone.className = "phone view_1 rotate";
        }, 1000);
    }, 1000);

}
})
</script>
<div id="inner_wrap">  

    <!--The Main Thing-->
<div id="wrapper" style="perspective: 1300px;">
<div class="phone view_2" id="phone_1" style="width: 360px; height: 640px;">
  <iframe src="https://cdpn.io/pen/debug/YzJoKZG?authentication_hash=RBrOJWPRojbM" id="frame_1"></iframe>
</div>
</div>

<!--Controls etc.-->
<div id="controls">
    <!--Idea by /u/aerosole-->
  <div>
    <label for="iframePerspective">Add perspective:</label>
    <input type="checkbox" id="iframePerspective" checked="true">
  </div>

</div>

<div id="phone-controls">

  <div id="views">
      <button value="1">Table View</button>
      <button value="2">Front View</button>
  </div>

  <div id="phones">
      <button value="1">iPhone 6</button>
      <button value="2">Samsung Galaxy Note</button>
      <button value="3">Microsoft Lumia 1020</button>
      <button value="4">HTC One</button>
      <button value="5">iPad Mini</button>
  </div>
</div
</div>