JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="noob-weapon-1 noob-3d-object noob-3d-face">
  <div class="noob-scope-mount">
    <iframe id="noob-scope">
      
    </iframe>
  </div>
</div>

CSS

html{
  height:100%;
}
body{
  height:100%;
  margin:0px;
  background-color:blue;
  perspective:500px;
}
.noob-weapon-1{
  transform:rotateY(0deg);
}
.noob-3d-face{
  top:50%;
  left:50%;
  position:absolute;
}
.noob-3d-object{
  height:0px;
  width:0px;
  transform-style:preserve-3d;
}
.noob-scope-mount{
  width:60px;
  height:80px;
  border-radius:5px;
  margin-left:-30px;
  margin-top:-40px;
  position:absolute;
}
#noob-scope{
  width:60px;
  height:80px;
  background-color:rgba(255,255,255,0.3);
  border-radius:5px;
  position:absolute;
  transform-style:preserve-3d;
}

JavaScript

var html_string = '<div class="noob-scope"><div class="noob-scope-crosshairs-1"></div></div><style>html{height:100%;}body{height:100%; margin:0px; background-color:blue; perspective:500px;}.noob-weapon-1{transform:rotateY(20deg);}.noob-3d-face{top:50%; left:50%; position:absolute;}.noob-3d-object{height:0px; width:0px; transform-style:preserve-3d;}.noob-scope-mount{width:60px; height:80px; border-radius:5px; margin-left:-30px; margin-top:-40px; position:absolute;}.noob-scope{width:60px; height:80px; background-color:rgba(255,255,255,0.3); border-radius:5px; position:absolute; transform-style:preserve-3d;}.noob-scope-crosshairs-1{width:50px; height:50px; background-color:rgba(255,0,0,0.3); border-radius:50%; transform:translateZ(-300px); position:absolute;}</style>';

var iframe = $('#noob-scope');

iframe.attr('src',"data:text/html;charset=utf-8," + escape(html_string));

var innerscope = iframe.contents().find('.noob-scope');