123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="page">
    <div class="content-container">
      <div class="perspective-container" id="threeTracker">
        <a class="brandHeader" href="http://onteractive.eu" target="_blank">
            <img src="http://labs.onteractive.eu/HR_ProductDesigner/BrandHeader.svg" alt="">
        </a>
        <div class="perspective-scene scene-container">
          <div class="sceneTilt object">
             <div class="character">
               <div class="character__screens object">
                 <div class="screen__central object screen">
                    
<svg width="244px" height="178px" viewBox="0 0 244 178" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs>
        <rect id="path-1" x="0" y="0" width="106" height="174" rx="4"></rect>
    </defs>
    <g id="HR-POSTS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard-Copy-8" transform="translate(-214.000000, -110.000000)">
            <g id="Group" transform="translate(216.000000, 112.000000)">
                <g id="Rectangle-19-Copy-9-+-Rectangle-19-Copy-10-+-Rectangle-19-Copy-11-+-Rectangle-19-Copy-12-+-Rectangle-19-Copy-13-Mask" transform="translate(134.000000, 0.000000)">
                    <mask id="mask-2" fill="white">
                        <use xlink:href="#path-1"></use>
                    </mask>
                    <rect stroke="#50E3C2" stroke-width="2" x="-1" y="-1" width="108" height="176" rx="4"></rect>
                    <rect id="Rectangle-19-Copy-9" fill-opacity="0.4" fill="#4A90E2" mask="url(#mask-2)" x="7" y="131" width="43" height="35" rx="2"></rect>
                    <rect id="Rectangle-19-Copy-10" fill-opacity="0.5" fill="#FFFFFF" mask="url(#mask-2)" x="7" y="171" width="35" height="5" rx="2"></rect>
                    <rect id="Rectangle-19-Copy-11" fill-opacity="0.4" fill="#4A90E2" mask="url(#mask-2)" x="57" y="131" width="43" height="35" rx="2"></rect>
                    <rect id="Rectangle-19-Copy-12" fill-opacity="0.5" fill="#FFFFFF" mask="url(#mask-2)" x="57" y="171" width="18" height="5" rx="2"></rect>
                    <rect id="Rectangle-19-Copy-13" fill-opacity="0.5" fill="#FFFFFF" mask="url(#mask-2)" x="79" y="171" width="10" height="5" rx="2"></rect>
                </g>
                <rect id="Rectangle-17" stroke="#50E3C2" stroke-width="2" x="-1" y="-1" width="108" height="176" rx="4"></rect>
                <path d="M4,-2.33083767e-06 L102.000013,-3.15434382e-06 C104.209152,-3.15434382e-06 106.000013,1.79085785 106.000013,3.99999685 C106.000013,3.99999712 106.000013,3.99999739 106.000013,3.99999767 L106.000013,58.1510133 C106.000012,59.8682678 104.903912,61.3939058 103.276439,61.9418965 C86.5176258,67.5847988 69.7588129,70.40625 53,70.40625 C36.2411844,70.40625 19.4823688,67.5847979 2.72355323,61.9418938 L2.72355714,61.9418822 C1.09609355,61.3938947 -1.12196585e-15,59.8682655 -1.33226763e-15,58.1510212 L-7.54951657e-15,3.99999767 C-7.82005807e-15,1.79085867 1.790861,-2.33083767e-06 4,-2.33083767e-06 Z" id="Rectangle-17-Copy" fill-opacity="0.3" fill="#4A90E2"></path>
                <circle id="Oval" stroke="#50E3C2" fill="#4A90E2" cx="53.5" cy="70.5" r="17.5"></circle>
                <rect id="Rectangle-19" fill="#4A90E2" x="7" y="96" width="93" height="21" rx="2"></rect>
                <rect id="Rectangle-19-Copy-3" fill="#4A90E2" x="141" y="7" width="93" height="63" rx="2"></rect>
                <rect id="Rectangle-19-Copy-4" fill-opacity="0.4" fill="#4A90E2" x="141" y="77" width="43" height="35" rx="2"></rect>
                <rect id="Rectangle-19-Copy-6" fill-opacity="0.5" fill="#FFFFFF" x="141" y="117" width="35" height="5" rx="2"></rect>
                <rect id="Rectangle-19-Copy-5" fill-opacity="0.4" fill="#4A90E2" x="191" y="77" width="43" height="35" rx="2"></rect>
                <rect id="Rectangle-19-Copy-7" fill-opacity="0.5" fill="#FFFFFF" x="191" y="117" width="18" height="5" rx="2"></rect>
                <rect id="Rectangle-19-Copy-8" fill-opacity="0.5" fill="#FFFFFF" x="213" y="117" width="10" height="5" rx="2"></rect>
                <rect id="Rectangle-19-Copy" fill-opacity="0.3" fill="#4A90E2" x="7" y="121" width="93" height="21" rx="2"></rect>
                <rect id="Rectangle-19-Copy-2" fill-opacity="0.3" fill="#4A90E2" x="7" y="146" width="93" height="21" rx="2"></rect>
                <circle id="Oval-2" fill="#FFFFFF" cx="99.5" cy="106.5" r="3.5"></circle>
                <circle id="Oval-2-Copy" fill="#FFFFFF" cx="133.5" cy="124.5" r="3.5"></circle>
                <path d="M102.859646,106.641681 L113.528281,106.641681 C115.73742,106.641681 117.528281,108.432542 117.528281,110.641681 L117.528281,120.349876 C117.528281,122.559015 119.319142,124.349876 121.528281,124.349876 L135.438444,124.349876" id="Path-38" stroke="#FFFFFF" opacity="0.5"></path>
            </g>
        </g>
    </g>
</svg>
                    
                 </div>
                 <div class="screen--surrounding object screen" 
                      style="height: 80px; width: 120px; top: 160px; left: 40px;">
                      <svg width="120px" height="80px" viewBox="0 0 120 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                          <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
                          <desc>Created with Sketch.</desc>
                          <defs></defs>
                          <g id="HR-POSTS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                              <g id="Artboard-Copy-8" transform="translate(-250.000000, -468.000000)">
                                  <g id="FlowChart" transform="translate(250.000000, 468.000000)">
                                      <path d="M5,-1.13686838e-13 L115,-1.13686838e-13 C117.761424,-1.14194103e-13 120,2.23857625 120,5 L120,75 C120,77.7614237 117.761424,80 115,80 L5,80 C2.23857625,80 3.38176876e-16,77.7614237 0,75 L0,5 C-3.38176876e-16,2.23857625 2.23857625,-1.13179572e-13 5,-1.13686838e-13 Z" id="Rectangle-10-Copy-2" fill-opacity="0.300000012" fill="#4A90E2"></path>
                                      <path d="M0.5,39.5 L6.5,39.5" id="Line" stroke="#50E3C2" stroke-linecap="square"></path>
                                      <path d="M32.5,39.5 L43.5,39.5" id="Line-Copy" stroke="#50E3C2" stroke-linecap="square"></path>
                                      <path d="M54.5,58.5 L54.5,46.5" id="Line-Copy-2" stroke="#50E3C2" stroke-linecap="square"></path>
                                      <path d="M76.5,39.5 L65.5,39.5" id="Line-Copy-3" stroke="#50E3C2" stroke-linecap="square"></path>
                                      <path d="M104.5,39.5 L96.5,39.5" id="Line-Copy-4" stroke="#50E3C2" stroke-linecap="square"></path>
                                      <path d="M86.5,25.5 L86.5,35.5" id="Line-Copy-5" stroke="#50E3C2" stroke-linecap="square"></path>
                                      <rect id="Rectangle-20" stroke="#FFFFFF" x="6.5" y="35.5" width="26" height="8" rx="1"></rect>
                                      <rect id="Rectangle-20-Copy-3" stroke="#FFFFFF" x="76.5" y="35.5" width="20" height="8" rx="1"></rect>
                                      <path d="M77,15.5000023 C76.7238576,15.5000023 76.5,15.72386 76.5,16.0000023 L76.5,22.3781666 C76.5,22.4406802 76.5117237,22.5026393 76.5345633,22.5608312 C76.6354471,22.817869 76.9256107,22.9444655 77.1826439,22.843601 C79.3042363,22.0109052 81.3836758,22.2619235 83.3666766,23.5839852 C85.2165244,24.8172742 86.3347229,25.3641249 87.4378473,25.5958242 C88.157937,25.7470712 88.7191052,25.773905 90.3838372,25.773905 C92.6682432,25.773905 94.6343575,25.1543706 96.2986485,23.9149907 C96.4253582,23.8206314 96.500021,23.6719401 96.5000214,23.513957 L96.5000211,16 C96.5000211,15.7238576 96.2761634,15.5 96.0000211,15.5 L77.0000001,15.5000023 Z" id="Rectangle-20-Copy-5" stroke="#FFFFFF"></path>
                                      <rect id="Rectangle-20-Copy-4" stroke="#FFFFFF" x="104.5" y="35.5" width="11" height="8" rx="4"></rect>
                                      <path d="M45.3333333,58.5 C45.1181181,58.5 44.9270487,58.637715 44.8589917,58.8418861 L42.5256584,65.8418861 C42.5086639,65.8928694 42.5,65.946259 42.5,66 C42.5,66.2761424 42.7238576,66.5 43,66.5 L62.8918149,66.5 C63.1070301,66.5 63.2980995,66.362285 63.3661565,66.1581139 L65.6994899,59.1581139 C65.7164843,59.1071306 65.7251482,59.053741 65.7251482,59 C65.7251482,58.7238576 65.5012906,58.5 65.2251482,58.5 L45.3333333,58.5 Z" id="Rectangle-20-Copy-2" stroke="#FFFFFF"></path>
                                      <path d="M54.7572479,32.7374439 C54.5989067,32.6424392 54.4010933,32.6424392 54.2427521,32.7374439 L43.6864028,39.0712535 C43.616028,39.1134784 43.557129,39.1723773 43.5149042,39.2427521 C43.3728301,39.4795423 43.4496126,39.7866724 43.6864028,39.9287465 L54.2427521,46.2625561 C54.4010933,46.3575608 54.5989067,46.3575608 54.7572479,46.2625561 L65.3135972,39.9287465 C65.383972,39.8865216 65.442871,39.8276227 65.4850958,39.7572479 C65.6271699,39.5204577 65.5503874,39.2133276 65.3135972,39.0712535 L54.7572479,32.7374439 Z" id="Rectangle-20-Copy" stroke="#FFFFFF"></path>
                                  </g>
                              </g>
                          </g>
                      </svg>
                   
                 </div>
                 <div class="screen--surrounding object screen" 
                      style="height: 40px; width: 80px; top: 250px; left: 80px; background-color: rgba(74,144,226,.3);r"></div>
                 <div class="screen--surrounding object screen" 
                      style="height: 60px; width: 90px; top: 190px; left: 435px; background-color: rgba(74,144,226,.3);"></div>
                 <div class="screen--surrounding object screen" style="height: 80px; width: 140px; top: 100px; left: 435px">  
                    
                    <svg width="146px" height="86px" viewBox="0 0 146 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
                        <desc>Created with Sketch.</desc>
                        <defs></defs>
                        <g id="HR-POSTS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="Artboard-Copy-8" transform="translate(-249.000000, -354.000000)">
                                <g id="Group-2" transform="translate(249.000000, 354.000000)">
                                    <path d="M5.7183551,0.651499438 L140.361558,0.651499438 C143.122982,0.651499438 145.361558,2.89007569 145.361558,5.65149944 L145.361558,80.8048901 C145.361558,83.5663138 143.122982,85.8048901 140.361558,85.8048901 L5.7183551,85.8048901 C2.95693135,85.8048901 0.718355103,83.5663138 0.718355103,80.8048901 L0.718355103,5.65149944 C0.718355103,2.89007569 2.95693135,0.651499438 5.7183551,0.651499438 Z" id="Rectangle-10-Copy" fill-opacity="0.300000012" fill="#4A90E2"></path>
                                    <rect id="Rectangle-2-Copy" fill-opacity="0.254047781" fill="#FFFFFF" x="101" y="10" width="37" height="28" rx="4"></rect>
                                    <rect id="Rectangle-2-Copy-2" fill-opacity="0.254047781" fill="#FFFFFF" x="101" y="42" width="37" height="35" rx="4"></rect>
                                    <rect id="Rectangle" fill="#50E3C2" x="11" y="37" width="16" height="4" rx="1"></rect>
                                    <rect id="Rectangle-Copy-2" fill="#FFFFFF" x="11" y="48" width="9" height="3" rx="1"></rect>
                                    <rect id="Rectangle-Copy-7" fill="#FFFFFF" x="11" y="60" width="4" height="3" rx="1"></rect>
                                    <rect id="Rectangle-Copy-12" fill="#FFFFFF" x="17" y="60" width="5" height="3" rx="1"></rect>
                                    <rect id="Rectangle-Copy-3" fill="#FFFFFF" opacity="0.5" x="26" y="48" width="6" height="3" rx="1"></rect>
                                    <rect id="Rectangle-Copy-8" fill="#FFFFFF" opacity="0.5" x="26" y="60" width="5" height="3" rx="1"></rect>
                                    <rect id="Rectangle-Copy-13" fill="#FFFFFF" opacity="0.5" x="33" y="60" width="8" height="3" rx="1"></rect>
                                    <rect id="Rectangle-Copy-5" fill="#FFFFFF" x="11" y="54" width="12" height="3" rx="1"></rect>
                                    <rect id="Rectangle-Copy-9" fill="#FFFFFF" x="11" y="66" width="9" height="3" rx="1"></rect>
                                    <rect id="Rectangle-Copy-4" fill="#FFFFFF" opacity="0.5" x="26" y="54" width="8" height="3" rx="1"></rect>
                                    <rect id="Rectangle-Copy-10" fill="#FFFFFF" opacity="0.5" x="26" y="66" width="8" height="3" rx="1"></rect>
                                    <rect id="Rectangle-Copy-6" fill="#FFFFFF" opacity="0.5" x="36" y="54" width="4" height="3" rx="1"></rect>
                                    <rect id="Rectangle-2" fill-opacity="0.254047781" fill="#FFFFFF" x="48" y="10" width="49" height="67" rx="4"></rect>
                                    <rect id="Rectangle-Copy-11" fill="#FFFFFF" x="52" y="14" width="21" height="2" rx="1"></rect>
                                    <rect id="Rectangle-Copy-14" fill="#FFFFFF" x="105" y="14" width="12" height="2" rx="1"></rect>
                                    <rect id="Rectangle-Copy-15" fill="#FFFFFF" x="105" y="46" width="9" height="2" rx="1"></rect>
                                    <rect id="Rectangle-Copy-16" fill="#FFFFFF" x="116" y="46" width="6" height="2" rx="1"></rect>
                                    <rect id="Rectangle-Copy" fill="#50E3C2" x="29" y="37" width="8" height="4" rx="1"></rect>
                                    <g id="Shape" transform="translate(10.000000, 9.000000)" fill="#FFFFFF" fill-rule="nonzero">
                                        <path d="M11.5,22.5 C5.42486775,22.5 0.5,17.5751322 0.5,11.5 C0.5,5.42486775 5.42486775,0.5 11.5,0.5 C17.5751322,0.5 22.5,5.42486775 22.5,11.5 C22.5,17.5751322 17.5751322,22.5 11.5,22.5 Z M4.15986228,18.2914147 C8.31508618,16.7266165 9.0334588,16.0527772 9.15020207,15.8393707 L9.15020207,15.2542724 C8.63101537,14.7123646 8.22444898,14.0010686 7.9687513,13.1844953 C7.64930628,12.931425 7.43681513,12.5676787 7.37873422,12.1695149 C7.32065331,11.7646025 7.42194075,11.365089 7.66559727,11.0317111 L7.66559727,9.38844174 C7.66559727,7.26670088 9.0992042,6 11.5003542,6 C13.9355027,6 15.3329861,7.23498275 15.3329861,9.38844174 L15.3329861,11.0310363 C15.5773509,11.3657638 15.6793467,11.7659522 15.6205575,12.1708646 C15.5624766,12.5690285 15.3499854,12.9320999 15.0298321,13.1851701 C14.7748427,14.0024183 14.3682763,14.7130395 13.8490896,15.2549472 L13.8490896,15.8400456 C13.9665095,16.0540949 14.6855372,16.7291802 18.8393722,18.2922416 C20.4906938,16.5087578 21.5,14.1222469 21.5,11.5 C21.5,5.9771525 17.0228475,1.5 11.5,1.5 C5.9771525,1.5 1.5,5.9771525 1.5,11.5 C1.5,14.1218417 2.50899433,16.5080202 4.15986228,18.2914147 Z" id="Combined-Shape"></path>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                    
                   
                 </div>
               </div>
              <img class="character__main object" src="http://labs.onteractive.eu/HR_ProductDesigner/TheCharacter.png" alt="">

            </div>
            <div class="hrposition object">
              <div class="positionName object">
                <span class="hiring ">WE ARE HIRING</span>
                <h1>Product</br>Designer</h1>
                <div class="salary">
                  <span class="salary__from">Up to</span>
                  <span class="salary__amount">$<strong>800</strong></span> 
                </div>
              </div>
              <a class="cta btn btn-apply object" href="https://docs.google.com/forms/d/e/1FAIpQLSea_vsdncqC7iIM0Dl4Z7-llNMPiRcPJs-xCzK3WxC6VgPoxw/viewform" target="_blank">
               <div class="cta__content">
                  <span>Apply now</span>
                  <div class="redArrows">
                    <span class="redArrow"></span>
                    <span class="redArrow"></span>
                    <span class="redArrow"></span>
                  </div>
                </div>
              </a>
            </div>
            <div class="object backgroundGrid">
              <span class="gridline object"></span>
              <span class="gridline object"></span>
              <span class="gridline object"></span>
              <span class="gridline object"></span>
              <span class="gridline object"></span>
              <span class="gridline object"></span>
              <span class="gridline object"></span>
              <span class="gridline object"></span>
              <span class="gridline object"></span>
              <span class="gridline object"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
            
          
!
            
              $hilight: #EF4B46;
$neonBlue: #50E3C2;
@font-face {
  font-family: "Proxima Nova";
  src: url("http://labs.onteractive.eu/HR_ProductDesigner/fonts/proximaNovaBold.otf") format("otf"),
}
*{
}
body {
  font-family: "Proxima Nova";
  font-weight: 800;
}
#page {
  background-color: #242d3d;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
#threeTracker{
  height: 600px; 
  width: 800px;
  box-shadow: 0px 10px 40px 0px rgba(#000,.2);
  position: relative;
  overflow:hidden;
  .brandHeader{
    height: 64px;
    display: flex;
    position: absolute;
    width: 100%;
    top: 0px; 
    left: 0px;
    justify-content: center;
    align-items: center;
    z-index: 999;
  }
  .object{
    position: absolute;
    display: block;
    transform-style: preserve-3d;
  }
  .hrposition{
    left: 40px;
    top: 330px;
    transform: translateZ(80px) scale(.8) rotateX(10deg);
    z-index: 999;
    .positionName{
      // transform: rotateX(10deg);
      .hiring{
        color: $hilight;
        font-size: 24px;
        margin-bottom: 24px;
        display: block;
      }
      h1{
        font-size: 60px;
        line-height: 48px;
        position: relative;
        text-transform: uppercase;
        color: transparent;
        -webkit-text-stroke: 2px rgba(#fff,.2);
        padding-bottom: 32px;
        &:after{
          content: 'Product designer';
          display: block;
          position:  absolute;
          color: #fff !important;
          top:0px;
          left:0px;
          transform: translateZ(40px);
        }
      }
      .salary{
        color: #fff;
        font-size: 20px;
        text-transform: uppercase;
        &__from{
          opacity: .4;
          display: inline-block;
          position: relative;
          transform: translateY(-10px);
          margin-right: 8px;
          &:after{
            content: '';
            display: block;
            position:  absolute;
            width: 100%;
            height: 2px;
            top: 32px;
            background-color: #fff;
          }
        }
        &__amount{
          font-size: 40px;
          strong{
            color: $hilight;
          }
        }
      }
    }
    .btn-apply{
      display: block;
      position: relative;
      height: 64px;
      border: 2px solid rgba(#fff,.1);
      border-radius: 8px;
      display: inline-block;
      line-height: 64px;
      padding: 0px 24px;
      color: #fff;
      background-color: rgba(#fff,.05);
      text-transform: uppercase;
      text-decoration: none;
      width: 300px;
      font-family: sans-serif;    
      left: 280px;
      top: 172px;
      transform-origin: 0% 50%;
      // transform: rotateY(21deg);
      transition: all .3s ease;
      &:after{
        content: '';
        display: block;
        height: 16px;
        width: 2px;
        background-color: #fff;
        position: absolute;
        top: 50%;
        left: -2px;
        transform: translateY(-50%);
      }
      .cta__content{
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        padding: 0px 24px;
        border-radius: 8px;
        border: 2px solid transparent;
        transition: all .3s ease;
      }
      
      &:hover{
        .cta__content{
          transform: translateZ(40px);
          border: 2px solid rgba(#fff,.5);
          // border: 2px solid $hilight;
        }
      }
      .redArrows{
        position: absolute;
        right: 32px;
        top: 30px;
        .redArrow{
          display: block;
          height: 4px;
          width: 16px;
          background-color: $hilight;
          position: absolute;
          transform: rotate(45deg);
          transform-origin: 100% 50%;
          border-radius: 2px;
          animation: flashFade 2s cubic-bezier(0, 1.03, 0.63, 1.01) infinite;
          &:after{
           border-radius: 2px;
            content: '';
            display: block;
            position: absolute;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            transform: rotate(-90deg);
            transform-origin: 88% 50%;
            background-color: $hilight;
            
          }
          &:nth-child(1){
            right: -10px;
            animation-delay: .6s;
          }
          &:nth-child(2){
            right: 0px;
            animation-delay: .4s;
          }
          &:nth-child(3){
            right: 10px;
            animation-delay: .2s;
            
          }
        }
      }
    }
  }
  .sceneTilt{
    height: 100%;
    width: 100%;
    // transform: rotateY(-12deg) rotateX(10deg);
  }
  .backgroundGrid{
    height: 100%;
    width:  100%;
    left: -50%;
    top: 5%;
    transform: translateZ(-460px) scale(1.2);
    .gridline{
      height: 4px; 
      width: 180%;
      left: -10%;
      display: block;
      background-color: rgba(#fff,.01);
      /* Rectangle 16 Copy 2: */
      margin-bottom: 32px;
      position: relative;
      overflow: hidden;
      &:after,&:before{
        content: '';
        display: block;
        position: absolute;
        top:  0px;
        left: 0px;
        width: 12px;
        height: 100%;
        background-color:#4E4AE2;
        box-shadow: 0px 0px 60px 30px rgba(#4E4AE2,.8);
      }
    }
    @for $i from 1 through 20{
      .gridline:nth-child(#{$i}){
        &:after{
          animation: moveRight #{6 +random(10)}s ease #{0 + random(5)}s infinite;
        }
        &:before{
          animation: moveRight #{6 +random(10)}s ease #{0 + random(5)}s infinite ;
        }
      }
    }
  }  
}
.character{
  transform: translateZ(-120px);
  transform-style: preserve-3d;
  
  &__background{
    top: 60px;
    width: 440px;
    right: 0px;
  }
  &__main{
    width: 320px;
    right: 30px;
    top: 140px;
    z-index: 99;
    transform: translateZ(-280px) scale(1.6);

  }
  &__screens{
    left: 60px;
    top: -20px;
    transform: rotateY(-20deg) rotateX(10deg) rotateZ(2deg) scale(1);
    .screen{
      border-radius: 8px;
      padding: 0px;
    }
    .screen--surrounding{
      // background-color: #4A90E2;
      // opacity: .4;
    }
    .screen__central{
        height: 140px;
        border-radius: 12px;
        width: 240px;
        border: 2px solid $neonBlue;
        border-top: 12  rpx solid $neonBlue;
        top: 120px;
        left: 180px;
        transform: translateZ(-40px);
        transform-style: preserve-3d;
        background-color: rgba(#0076FF,.2);
        position: relative;
        display: flex !important;
        align-items: center;
        justify-content: center;
        svg{
          height: 100px;
        }
        &:after{
          content: '';
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0px;
          left: 0px;
          border: 2px solid $neonBlue;
          // background-color: rgba(#0076FF,.2);    
          border-radius: 12px;
          opacity: .2;
          transform: translateZ(40px);
        }
    }
  }
}
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.perspective-container {
  .perspective-scene{
    position:absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    // z-index: 2;
    transform: perspective(1400px);
    transform-style: preserve-3d;
    
  }
}
.scene-container{
      // animation: spin 4s linear infinite;
    }
@keyframes moveRight {
  0%{
    transform:  translateX(0px);
  }
  100%{
    transform:  translateX(1200px);
  }
}

@keyframes flashFade{
  0%{
    opacity: 1;
  }
  90%{
    opacity: .1;
  }
  100%{
    opacity: 1;
  }
}

@keyframes spin{
  0%{
    transform: rotateY(0deg);
  }
  100%{
    transform: rotateY(360deg);
  }
}
            
          
!
            
              var $win = window,
    $doc = document;
var screenWidth = $win.screen.width / 2,
    screenHeight = $win.screen.height / 2,
    $elems = $doc.getElementsByClassName("scene-container"),
    validPropertyPrefix = "",
    otherProperty = "perspective(1400px)",
    degX = 0,
    degY = 0;

console.log($elems.length);
console.log('is it even running');
if ($elems.length > 0) {
  var elemStyle = $doc.getElementsByClassName("scene-container")[0].style;

  if (typeof elemStyle.webkitTransform == "string") {
    validPropertyPrefix = "webkitTransform";
  } else if (typeof elemStyle.MozTransform == "string") {
    validPropertyPrefix = "MozTransform";
  }

  function normalizeData(_g, _b) {
    b = Math.round(_b);
    g = Math.round(_g);

    degX = -g * 0.5;
    // degY = b*.2;
    // degY += (b - degY) *0.1;
    for (var $i = 0; $i < $elems.length; $i++) {
      $elem = $elems[$i];
      $elem.style[validPropertyPrefix] =
        otherProperty + "rotateY(" + degX + "deg)  rotateX(" + degY + "deg)";
    }
  }

  $doc.getElementById("page").addEventListener("mousemove", function(e) {
    for (var $i = 0; $i < $elems.length; $i++) {
      var centroX = e.clientX - 600,
          
          centroY = 600 - (e.clientY),
          degX = -centroX * 0.01,
          degY = -centroY * 0.01,
          $elem = $elems[$i];
          $elem.style[validPropertyPrefix] =
          otherProperty + "rotateY(" + degX + "deg)  rotateX(" + degY + "deg)";
    }
  });
  $doc.getElementById("threeTracker").addEventListener("mouseleave", function(e) {
    console.log("leave page");
    for (var $i = 0; $i < $elems.length; $i++) {
      $elem = $elems[$i];
      $elem.style[validPropertyPrefix] =
        otherProperty + "rotateY( 0deg)  rotateX(0deg)";
    }
  });
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console