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.

            
              <div class="simpleRoad">
    <div class="speed">Mooooar speeeed ?! Hover me !</div>
    <div class="day"></div>
    <div class="wrapper3d">
      <div class="scaler">
        <div class="node mainNode">
          <div class="terrainNode1 node">
            <div class="terrainBlock1 node">
              <div class="item index1 zFaces"></div>
              <div class="item index3 zFaces"></div>
              <div class="item index4 xFaces"></div>
              <div class="item index5 yFaces"></div>
            </div>
            <div class="terrainNode2 node">
              <div class="terrainBlock2 node">
                <div class="item index1 zFaces"></div>
                <div class="item index3 zFaces"></div>
                <div class="item index4 xFaces"></div>
                <div class="item index5 yFaces"></div>
              </div>
              <div class="terrainNode3 node">
                <div class="terrainBlock3 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
                <div class="terrainNode4 node">
                  <div class="terrainBlock4 node">
                    <div class="item index1 zFaces"></div>
                    <div class="item index3 zFaces"></div>
                    <div class="item index4 xFaces"></div>
                    <div class="item index5 yFaces"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- /.terrainNode1 node -->
          <div class="roadNode node">
            <div class="roadBlock node">
              <div class="item index1 zFaces"></div>
              <div class="item index3 zFaces"></div>
              <div class="item index5 yFaces">
                <div class="stripes"></div>
                <div class="stripes"></div>
                <div class="stripes"></div>
                <div class="stripes"></div>
                <div class="stripes"></div>
              </div>
            </div>
            <div class="roadSideNode1 node">
              <div class="roadSideBlock1 node">
                <div class="item index1 zFaces"></div>
                <div class="item index2 xFaces"></div>
                <div class="item index3 zFaces"></div>
                <div class="item index4 xFaces"></div>
                <div class="item index5 yFaces"></div>
              </div>
            </div>
            <div class="roadSideNode2 node">
              <div class="roadSideBlock2 node">
                <div class="item index1 zFaces"></div>
                <div class="item index2 xFaces"></div>
                <div class="item index3 zFaces"></div>
                <div class="item index4 xFaces"></div>
                <div class="item index5 yFaces"></div>
              </div>
            </div>
          </div>
          <!--/.roadNode node-->
          <div class="roadToggle"></div>
          <div class="carGroup node">
            <div class="carBodyNode node">
              <div class="carBodyBlock node">
                <div class="item index1 zFaces"></div>
                <div class="item index2 xFaces"></div>
                <div class="item index3 zFaces"></div>
                <div class="item index4 xFaces"></div>
                <div class="item index5 yFaces"></div>
              </div>
              <div class="wheelNode1 node">
                <div class="wheelBlock1 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                  <div class="item index6 yFaces"></div>
                </div>
              </div>
              <div class="wheelNode2 node">
                <div class="wheelBlock2 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                  <div class="item index6 yFaces"></div>
                </div>
              </div>
              <div class="wheelNode3 node">
                <div class="wheelBlock3 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                  <div class="item index6 yFaces"></div>
                </div>
              </div>
              <div class="wheelNode4 node">
                <div class="wheelBlock4 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                  <div class="item index6 yFaces"></div>
                </div>
              </div>
              <div class="cockpitNode1 node">
                <div class="cockpitBlock1 node">
                  <div class="item index1 xFaces"></div>
                  <div class="item index3 xFaces"></div>
                  <div class="item index4 zFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="cockpitNode2 node">
                <div class="cockpitBlock2 node">
                  <div class="item index1 xFaces"></div>
                  <div class="item index2 zFaces"></div>
                  <div class="item index3 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
            </div>
            <!--/.carBodyNode node-->
          </div>
          <!--/.carGroup node-->
          <div class="spruceTreeNode1 node">
            <div class="spruceGroup1 node">
              <div class="spruceTreeBlock node">
                <div class="item index1 zFaces"></div>
                <div class="item index2 xFaces"></div>
                <div class="item index3 zFaces"></div>
                <div class="item index4 xFaces"></div>
              </div>
              <div class="spruceLeavesNode1 node">
                <div class="spruceLeavesBlock1 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode2 node">
                <div class="spruceLeavesBlock2 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode3 node">
                <div class="spruceLeavesBlock3 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode4 node">
                <div class="spruceLeavesBlock4 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode5 node">
                <div class="spruceLeavesBlock5 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
            </div>
            <!--/.spruceGroup1 node-->
          </div>
          <!--/.spruceTreeNode1 node-->
          <div class="spruceTreeNode2 node">
            <div class="spruceGroup2 node">
              <div class="spruceTreeBlock node">
                <div class="item index1 zFaces"></div>
                <div class="item index2 xFaces"></div>
                <div class="item index3 zFaces"></div>
                <div class="item index4 xFaces"></div>
              </div>
              <div class="spruceLeavesNode1 node">
                <div class="spruceLeavesBlock1 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode2 node">
                <div class="spruceLeavesBlock2 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode3 node">
                <div class="spruceLeavesBlock3 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode4 node">
                <div class="spruceLeavesBlock4 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode5 node">
                <div class="spruceLeavesBlock5 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
            </div>
            <!--/.spruceGroup2 node-->
          </div>
          <!--/.spruceTreeNode2 node-->
          <div class="spruceTreeNode3 node">
            <div class="spruceGroup3 node">
              <div class="spruceTreeBlock node">
                <div class="item index1 zFaces"></div>
                <div class="item index2 xFaces"></div>
                <div class="item index3 zFaces"></div>
                <div class="item index4 xFaces"></div>
              </div>
              <div class="spruceLeavesNode1 node">
                <div class="spruceLeavesBlock1 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode2 node">
                <div class="spruceLeavesBlock2 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode3 node">
                <div class="spruceLeavesBlock3 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode4 node">
                <div class="spruceLeavesBlock4 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode5 node">
                <div class="spruceLeavesBlock5 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
            </div>
            <!--/.spruceGroup3 node-->
          </div>
          <!--/.spruceTreeNode3 node-->
          <div class="spruceTreeNode4 node">
            <div class="spruceGroup4 node">
              <div class="spruceTreeBlock node">
                <div class="item index1 zFaces"></div>
                <div class="item index2 xFaces"></div>
                <div class="item index3 zFaces"></div>
                <div class="item index4 xFaces"></div>
              </div>
              <div class="spruceLeavesNode1 node">
                <div class="spruceLeavesBlock1 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode2 node">
                <div class="spruceLeavesBlock2 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode3 node">
                <div class="spruceLeavesBlock3 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode4 node">
                <div class="spruceLeavesBlock4 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode5 node">
                <div class="spruceLeavesBlock5 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
            </div>
            <!--/.spruceGroup4 node-->
          </div>
          <!--/.spruceTreeNode4 node-->
          <div class="spruceTreeNode5 node">
            <div class="spruceGroup5 node">
              <div class="spruceTreeBlock node">
                <div class="item index1 zFaces"></div>
                <div class="item index2 xFaces"></div>
                <div class="item index3 zFaces"></div>
                <div class="item index4 xFaces"></div>
              </div>
              <div class="spruceLeavesNode1 node">
                <div class="spruceLeavesBlock1 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode2 node">
                <div class="spruceLeavesBlock2 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode3 node">
                <div class="spruceLeavesBlock3 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode4 node">
                <div class="spruceLeavesBlock4 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode5 node">
                <div class="spruceLeavesBlock5 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
            </div>
            <!--/.spruceGroup5 node-->
          </div>
          <!--/.spruceTreeNode5 node-->
          <div class="spruceTreeNode6 node">
            <div class="spruceGroup6 node">
              <div class="spruceTreeBlock node">
                <div class="item index1 zFaces"></div>
                <div class="item index2 xFaces"></div>
                <div class="item index3 zFaces"></div>
                <div class="item index4 xFaces"></div>
              </div>
              <div class="spruceLeavesNode1 node">
                <div class="spruceLeavesBlock1 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode2 node">
                <div class="spruceLeavesBlock2 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode3 node">
                <div class="spruceLeavesBlock3 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode4 node">
                <div class="spruceLeavesBlock4 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
              <div class="spruceLeavesNode5 node">
                <div class="spruceLeavesBlock5 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                </div>
              </div>
            </div>
            <!--/.spruceGroup6 node-->
          </div>
          <!--/.spruceTreeNode6 node-->
          <div class="roadLightNode1 node">
            <div class="lightGroup1 node">
              <div class="lightBodyBlock1 node">
                <div class="item index1 zFaces"></div>
                <div class="item index2 xFaces"></div>
                <div class="item index3 zFaces"></div>
                <div class="item index4 xFaces"></div>
              </div>
              <div class="lightBodyNode2 node">
                <div class="lightBodyBlock2 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                  <div class="item index6 yFaces"></div>
                </div>
                <div class="lightBodyNode3 node">
                  <div class="lightBodyBlock3 node">
                    <div class="item index1 zFaces"></div>
                    <div class="item index2 xFaces"></div>
                    <div class="item index3 zFaces"></div>
                    <div class="item index4 xFaces"></div>
                    <div class="item index5 yFaces"></div>
                  </div>
                  <div class="lightBulbNode1 node">
                    <div class="lightBulbBlock1 node">
                      <div class="item index1 zFaces"></div>
                      <div class="item index2 xFaces"></div>
                      <div class="item index3 zFaces"></div>
                      <div class="item index4 xFaces"></div>
                      <div class="item index6 yFaces"></div>
                    </div>
                  </div>
                  <div class="lightBulbNode2 node">
                    <div class="lightBulbBlock2 node">
                      <div class="item index1 zFaces"></div>
                      <div class="item index2 xFaces"></div>
                      <div class="item index3 zFaces"></div>
                      <div class="item index4 xFaces"></div>
                      <div class="item index6 yFaces"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--/.lightGroup1 node-->
          </div>
          <!--/.roadLightNode1 node-->
          <div class="roadLightNode2 node">
            <div class="lightGroup2 node">
              <div class="lightBodyBlock1 node">
                <div class="item index1 zFaces"></div>
                <div class="item index2 xFaces"></div>
                <div class="item index3 zFaces"></div>
                <div class="item index4 xFaces"></div>
              </div>
              <div class="lightBodyNode2 node">
                <div class="lightBodyBlock2 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                  <div class="item index5 yFaces"></div>
                  <div class="item index6 yFaces"></div>
                </div>
                <div class="lightBodyNode3 node">
                  <div class="lightBodyBlock3 node">
                    <div class="item index1 zFaces"></div>
                    <div class="item index2 xFaces"></div>
                    <div class="item index3 zFaces"></div>
                    <div class="item index4 xFaces"></div>
                    <div class="item index5 yFaces"></div>
                  </div>
                  <div class="lightBulbNode1 node">
                    <div class="lightBulbBlock1 node">
                      <div class="item index1 zFaces"></div>
                      <div class="item index2 xFaces"></div>
                      <div class="item index3 zFaces"></div>
                      <div class="item index4 xFaces"></div>
                      <div class="item index6 yFaces"></div>
                    </div>
                  </div>
                  <div class="lightBulbNode2 node">
                    <div class="lightBulbBlock2 node">
                      <div class="item index1 zFaces"></div>
                      <div class="item index2 xFaces"></div>
                      <div class="item index3 zFaces"></div>
                      <div class="item index4 xFaces"></div>
                      <div class="item index6 yFaces"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--/.lightGroup2 node-->
          </div>
          <!--/.roadLightNode2 node-->
          <div class="windTurbineNode1 node">
            <div class="turbineGroup1 node">
              <div class="windTurbineGroundBlock1 node">
                <div class="item index1 zFaces"></div>
                <div class="item index2 xFaces"></div>
                <div class="item index3 zFaces"></div>
                <div class="item index4 xFaces"></div>
                <div class="item index5 yFaces"></div>
              </div>
              <div class="windTurbineNode2 node">
                <div class="windTurbineBlock2 node">
                  <div class="item index1 zFaces"></div>
                  <div class="item index2 xFaces"></div>
                  <div class="item index3 zFaces"></div>
                  <div class="item index4 xFaces"></div>
                </div>
                <div class="windTurbineNode3 node">
                  <div class="windTurbineBlock3 node">
                    <div class="item index1 zFaces"></div>
                    <div class="item index2 xFaces"></div>
                    <div class="item index3 zFaces"></div>
                    <div class="item index4 xFaces"></div>
                    <div class="item index5 yFaces"></div>
                    <div class="item index6 yFaces"></div>
                  </div>
                  <div class="windPropNode1 node">
                    <div class="windPropBlock1 node">
                      <div class="item index1 zFaces"></div>
                      <div class="item index2 xFaces"></div>
                      <div class="item index3 zFaces"></div>
                      <div class="item index4 xFaces"></div>
                      <div class="item index5 yFaces"></div>
                      <div class="item index6 yFaces"></div>
                    </div>
                  </div>
                  <div class="windPropNode2 node">
                    <div class="windPropBlock2 node">
                      <div class="item index1 zFaces"></div>
                      <div class="item index2 xFaces"></div>
                      <div class="item index3 zFaces"></div>
                      <div class="item index4 xFaces"></div>
                      <div class="item index5 yFaces"></div>
                      <div class="item index6 yFaces"></div>
                    </div>
                  </div>
                  <div class="windPropNode3 node">
                    <div class="windPropBlock3 node">
                      <div class="item index1 zFaces"></div>
                      <div class="item index2 xFaces"></div>
                      <div class="item index3 zFaces"></div>
                      <div class="item index4 xFaces"></div>
                      <div class="item index5 yFaces"></div>
                      <div class="item index6 yFaces"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--/.turbineGroup1 node-->
          </div>
          <!--/.windTurbineNode1 node-->
        </div>
        <!-- /.node mainNode -->
      </div>
      <!-- /.scaler -->
    </div>
    <!-- /.wrapper3d -->
  </div>
  <!-- /.simpleRoad -->
            
          
!
            
              body{
  background: #0F141A;
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  font-family: 'Bad Script', cursive;
  font-size: 30px;
  color: #ffffff;
}

/** Main element config
 *
 * Here are the main element of simple road :
 *
 * .day (which is the day half of the day/night cycle)
 * .speed (which is used to activate SPEED animation
 * .wrapper3d (which will hold all 3d element)
 * .wrapper3d::after (which is used to get to "3rd" person view)
 * 
 */

div.simpleRoad .day{
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: #63D9FD;
  animation: SR-timeCycle 15s ease infinite alternate;
  will-change: opacity;
}

div.simpleRoad .speed{
  position: absolute;
  top: 40px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  cursor: pointer;
  text-align: center;
  transition: opacity 1s ease, color 1s ease;
  will-change: opacity;
}

div.simpleRoad .speed:hover{
  opacity: .5;
  color: #ff8400;
}

div.simpleRoad .wrapper3d{
  width: 400px;
  max-width: 100vw;
  height: 400px;
  max-height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

div.simpleRoad .wrapper3d::after{
  content: "Hover the road then drive me...";
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 110%;
  transition: opacity .5s ease 1s;
  will-change: opacity;
}

div.simpleRoad .wrapper3d:hover::after{
  transition: opacity 1s ease;
  opacity: 0;
}

/** 3D scaler
 *
 * This div is used only to rescale, move arround, etc. the entire world in order to keep perspective
 *
 */

div.simpleRoad .scaler{
  position: absolute;
  top: 50%;
  left: 50%;
  perspective: 800px;
  transform: scale3d(1,1,1);
  animation: SR-scaleIn .5s ease;
}

/** 3D world main node
 *
 * This main node is the center of everything in the 3D world (pos : 0 0 0) everything you'll going to build in will at least start from this node
 * Animating this node can be usefull to showcase the 3D world, it is used here in order to get to the "3rd" person view
 *
 */

div.simpleRoad .mainNode{
  transform: rotateX(-25deg) rotateY(55deg) translate3d(0,0,0);
  transition: transform 1s ease;
  will-change: transform;
}

div.simpleRoad .wrapper3d:hover .mainNode{
  transform: rotateX(-8deg) rotateY(180deg) translate3d(0,-57px,-569px);
}

/** Nodes
 *
 * Nodes are dot used for two thing :
 *
 * > Nodes are the position arround which blocks linked to can be animated, that mean that nodes have to be placed in terms of the "previous" node (main node = 0 0 0)
 * > Blocks DIRECTLY linked to a specific node must be positionned in terms of this one on the 3D space
 *
 */

div.simpleRoad .node{
  transform-style: preserve-3d;
}

/** Blocks
 *
 * Here's the basic block setup which is a basic 100*100*100px cube by default with no texture
 *
 */

div.simpleRoad .item{
  width: 100px;
  height: 100px;
  position: absolute;
  top: -50px;
  left: -50px;
}

/* Creating the cube... */

div.simpleRoad .item.index1{
  transform: translateZ(50px);
}

div.simpleRoad .item.index2{
  transform: rotateY(90deg) translateZ(50px);
}

div.simpleRoad .item.index3{
  transform: rotateY(180deg) translateZ(50px);
}

div.simpleRoad .item.index4{
  transform: rotateY(270deg) translateZ(50px);
}

div.simpleRoad .item.index5{
  transform: rotateX(90deg) translateZ(50px);
}

div.simpleRoad .item.index6{
  transform: rotateX(270deg) translateZ(50px);
}

/** Construction
 *
 * Here are all the css used to build thing out of our basic 3d block, texturing will be made later
 *
 */

/************************************
 *            Terrain
 ***********************************/

div.simpleRoad .terrainNode1{
  transform: translateY(7.5px);
  will-change: transform;
}

div.simpleRoad .terrainBlock1{
  transform: scale3d(3,.15,3);
}

div.simpleRoad .terrainNode2{
  transform: translateY(20px);
  animation: SR-comeIn .5s ease .6s backwards;
}

div.simpleRoad .terrainBlock2{
  transform: scale3d(3,.15,3);
}

div.simpleRoad .terrainNode3{
  transform: translateY(20px);
  animation: SR-comeIn .5s ease .8s backwards;
}

div.simpleRoad .terrainBlock3{
  transform: scale3d(3,.15,3);
}

div.simpleRoad .terrainNode4{
  transform: translateY(22.5px);
  animation: SR-comeIn .5s ease 1s backwards;
}

div.simpleRoad .terrainBlock4{
  transform: scale3d(3,.2,3);
}

/************************************
 *              Road
 ***********************************/

div.simpleRoad .roadNode{
  transform: translateY(-1px);
  will-change: transform;
}

div.simpleRoad .roadBlock{
  transform: scale3d(.8,.02,3);
}

div.simpleRoad .roadBlock .stripes{
  width: 4px;
  height: 15px;
  background: #fff;
  margin: 10px auto;
  animation: SR-road 1s linear infinite 1.5s;
  will-change: transform;
}

div.simpleRoad .roadSideNode1{
  transform: translateX(-42px);
}

div.simpleRoad .roadSideNode2{
  transform: translateX(42px);
}

div.simpleRoad [class^="roadSideBlock"]{
  transform: scale3d(.04,.04,3);
}

/************************************
 *              Car
 ***********************************/

/* Group in order to grab all element from the car */
div.simpleRoad .carGroup{
  transition: transform .8s ease;
  will-change: transform;
}

/* .roadToggle is used in order to give user the ability to drive car left/right */
div.simpleRoad .roadToggle{
  width: 300px;
  height: 300px;
  position: absolute;
  top: -50px;
  left: -50px;
  transform: translate3d(50px,-100px,-150px) rotateY(180deg);
}

div.simpleRoad .roadToggle:hover + .carGroup{
  transform: translateX(40px);
}

/* Here really start the construction of the car */
div.simpleRoad .carBodyNode{
  transform: translate3d(-21px,-5px,-50px);
  animation: SR-drive 5s linear infinite 1.5s;
  will-change: transform;
}

div.simpleRoad .carBodyBlock{
  transform: translateY(-5px) scale3d(.3,.1,.6);
}

div.simpleRoad .wheelNode1{
  transform: translate3d(-15px,-2px,18px);
}

div.simpleRoad .wheelNode2{
  transform: translate3d(15px,-2px,18px);
}

div.simpleRoad .wheelNode3{
  transform: translate3d(15px,-2px,-18px);
}

div.simpleRoad .wheelNode4{
  transform: translate3d(-15px,-2px,-18px);
}

div.simpleRoad [class^="wheelBlock"]{
  transform: scale3d(.05,.1,.1);
  animation: SR-wheel 1s linear infinite 1.5s;
  will-change: transform;
}

/* Car cockpit */

div.simpleRoad [class^="cockpitNode"]{
  transform: translate3d(0px,-15px,0);
}

div.simpleRoad .cockpitBlock1{
  transform: rotateY(90deg) scale3d(.3,.1,.3) skewX(-10deg);
}

div.simpleRoad .cockpitBlock2{
  transform: translateZ(-5px) rotateY(90deg) scale3d(.3,.1,.3) skewX(10deg);
}

/************************************
 *           Tree spruce
 ***********************************/

/* Placing all the 6 tree at a spawn position */
div.simpleRoad .spruceTreeNode1{
  transform: translate3d(-78px,0,150px);
}

div.simpleRoad .spruceTreeNode2{
  transform: translate3d(75px,0,150px);
}

div.simpleRoad .spruceTreeNode3{
  transform: translate3d(92px,0,150px);
}

div.simpleRoad .spruceTreeNode4{
  transform: translate3d(-111px,0,150px);
}

div.simpleRoad .spruceTreeNode5{
  transform: translate3d(122px,0,150px);
}

div.simpleRoad .spruceTreeNode6{
  transform: translate3d(-88px,0,150px);
}

/* Give all tree a SR-roadElem animation in order to make them appear with an order */
div.simpleRoad .spruceGroup1{
  animation: SR-roadElem 8s linear infinite 2.5s backwards;;
  will-change: transform;
}

div.simpleRoad .spruceGroup2{
  animation: SR-roadElem 8s linear infinite 4s backwards;
  will-change: transform;
}

div.simpleRoad .spruceGroup3{
  animation: SR-roadElem 8s linear infinite 5.5s backwards;
  will-change: transform;
}

div.simpleRoad .spruceGroup4{
  animation: SR-roadElem 8s linear infinite 6.5s backwards;
  will-change: transform;
}

div.simpleRoad .spruceGroup5{
  animation: SR-roadElem 8s linear infinite 8s backwards;
  will-change: transform;
}

div.simpleRoad .spruceGroup6{
  animation: SR-roadElem 8s linear infinite 9.5s backwards;
  will-change: transform;
}

/* Tree body */
div.simpleRoad .spruceTreeBlock{
  transform: translateY(-50px) scale3d(.05,1,.05);
}

/* Placing each leaves layer node from the bottom of the body */
div.simpleRoad .spruceLeavesNode1{
  transform: translate3d(0,-20px,0);
}

div.simpleRoad .spruceLeavesNode2{
  transform: translate3d(0,-40px,0);
}

div.simpleRoad .spruceLeavesNode3{
  transform: translate3d(0,-60px,0);
}

div.simpleRoad .spruceLeavesNode4{
  transform: translate3d(0,-80px,0);
}

div.simpleRoad .spruceLeavesNode5{
  transform: translate3d(0,-100px,0);
}

/* Then shaping each leaves layer in a spruce way */
div.simpleRoad .spruceLeavesBlock1{
  transform: scale3d(.5,.05,.5) rotateY(0deg);
}

div.simpleRoad .spruceLeavesBlock2{
  transform: scale3d(.4,.05,.4) rotateY(22.5deg);
}

div.simpleRoad .spruceLeavesBlock3{
  transform: scale3d(.3,.05,.3) rotateY(45deg);
}

div.simpleRoad .spruceLeavesBlock4{
  transform: scale3d(.2,.05,.2) rotateY(67.5deg);
}

div.simpleRoad .spruceLeavesBlock5{
  transform: scale3d(.1,.05,.1) rotateY(90deg);
}

/************************************
 *          Road light
 ***********************************/

/* Placing all the 2 road light at a spawn position */
div.simpleRoad .roadLightNode1{
  transform: translate3d(-42px,0,150px);
}

div.simpleRoad .roadLightNode2{
  transform: translate3d(42px,0,150px);
}

/* Give all road light a SR-roadElem animation in order to make them appear with an order. 
Note : The animation is here 1s faster in order to randomize road light spawn from other element */
div.simpleRoad .lightGroup1{
  animation: SR-roadElem 7s linear infinite 1.8s backwards;
  will-change: transform;
}

div.simpleRoad .lightGroup2{
  animation: SR-roadElem 7s linear infinite 5.8s backwards;
  will-change: transform;
}

/* Road light body */
div.simpleRoad .lightBodyBlock1{
  transform: translateY(-35px) scale3d(.04,.7,.04);
}

/* First light arm */
div.simpleRoad .lightBodyNode2{
  transform: translate3d(10px,-71px,0);
}

/* Reverse light arm (for the road light on the other side of the road) */
div.simpleRoad .roadLightNode2 .lightBodyNode2{
  transform: rotateY(180deg) translate3d(10px,-71px,0);
}

div.simpleRoad .lightBodyBlock2{
  transform: scale3d(.3,.04,.04);
}

/* This is the lampshade of the road light */
div.simpleRoad .lightBodyNode3{
  transform: translate3d(14px,2px,0);
}

div.simpleRoad .lightBodyBlock3{
  transform: scale3d(.08,.05,.08);
}

/* Here are the light, one for the day, one for the night */
div.simpleRoad .lightBulbNode1, div.simpleRoad .lightBulbNode2{
  transform: translate3d(0,1px,0);
}

div.simpleRoad .lightBulbBlock1, div.simpleRoad .lightBulbBlock2{
  transform: scale3d(.06,.06,.06);
}

/* This animation basically make the second bulb (off one) disappear at night in order to "turn on" the light */
div.simpleRoad .lightBulbBlock2 .item{
  animation: SR-timeCycle 15s ease infinite alternate;
  will-change: opacity;
}

/************************************
 *         Wind turbine
 ***********************************/

/* Placing the wind turbine at a spawn position */
div.simpleRoad .windTurbineNode1{
  transform: translate3d(110px,0,150px);
}

/* Give the wind turbine a SR-roadElem animation in order to make it appear with an order. */
div.simpleRoad .turbineGroup1{
  animation: SR-roadElem 8s linear infinite 9.8s backwards;
  will-change: transform;
}

/* Foundation of the wind turbine */
div.simpleRoad .windTurbineGroundBlock1{
  transform: translateY(-5px) scale3d(.2,.1,.2);
}

/* Wind turbine body */
div.simpleRoad .windTurbineNode2{
  transform: translate3d(0,-80px,0);
}

div.simpleRoad .windTurbineBlock2{
  transform: scale3d(.1,1.4,.1) rotateY(45deg);
}

/* Wind turbine top */
div.simpleRoad .windTurbineNode3{
  transform: translate3d(0,-75px,0) rotateY(20deg);
}

div.simpleRoad .windTurbineBlock3{
  transform: scale3d(.3,.1,.15);
}

/* Wind turbine propellers node placement*/
div.simpleRoad .windPropNode1{
  transform: translate3d(-15px,0,0);
}

div.simpleRoad .windPropNode2{
  transform: translate3d(-15px,0,0);
}

div.simpleRoad .windPropNode3{
  transform: translate3d(-15px,0,0);
}

/* Wind turbine propellers blocks */
div.simpleRoad .windPropBlock1{
  transform: translate3d(0,40px,0) scale3d(.05,.8,.1);
}

div.simpleRoad .windPropBlock2{
  transform: rotateX(120deg) translate3d(0,40px,0) scale3d(.05,.8,.1);
}

div.simpleRoad .windPropBlock3{
  transform: rotateX(240deg) translate3d(0,40px,0) scale3d(.05,.8,.1);
}

/* Animating the wind turbine's propellers */
div.simpleRoad [class^="windPropNode"]{
  animation: SR-windTurbineSpin 4s linear infinite;
  will-change: transform;
}

/** Texturing
 *
 * Here are all the css used to texture all the block we've just created
 *
 */

/* Terrain */

div.simpleRoad .terrainBlock1 .item.xFaces{background: #123707;}
div.simpleRoad .terrainBlock1 .item.yFaces{background: #448D37;}
div.simpleRoad .terrainBlock1 .item.zFaces{background: #346C1A;}

div.simpleRoad .terrainBlock2 .item.xFaces{background: #3A5121;}
div.simpleRoad .terrainBlock2 .item.yFaces{background: #719F51;}
div.simpleRoad .terrainBlock2 .item.zFaces{background: #87A749;}

div.simpleRoad .terrainBlock3 .item.xFaces{background: #403318;}
div.simpleRoad .terrainBlock3 .item.yFaces{background: #7C6941;}
div.simpleRoad .terrainBlock3 .item.zFaces{background: #8E6834;}

div.simpleRoad .terrainBlock4 .item.xFaces{background: #1C0C04;}
div.simpleRoad .terrainBlock4 .item.yFaces{background: #3E2921;}
div.simpleRoad .terrainBlock4 .item.zFaces{background: #421E0D;}

/* Road */

div.simpleRoad .roadBlock .item.xFaces{background: #424B3D;}
div.simpleRoad .roadBlock .item.yFaces{background: #545C5F; overflow: hidden;}
div.simpleRoad .roadBlock .item.zFaces{background: #424B3D;}

div.simpleRoad [class^="roadSideBlock"] .item.xFaces{background: #424B48;}
div.simpleRoad [class^="roadSideBlock"] .item.yFaces{background: #AFBDC1;}
div.simpleRoad [class^="roadSideBlock"] .item.zFaces{background: #8F9188;}

/* Car */

div.simpleRoad .carBodyBlock .item.xFaces{background: #701601;}
div.simpleRoad .carBodyBlock .item.yFaces{background: #FF7464;}
div.simpleRoad .carBodyBlock .item.zFaces{background: #FC603B;}

/* In order to simulate cockpit frames and windows we're using css border */
div.simpleRoad [class^="cockpitNode"] .item:not(.yFaces){
  width: 92px;
  height: 92px;
  border: 4px solid #701601;
  background: rgba(172, 255, 255, 0.5);
}
div.simpleRoad [class^="cockpitNode"] .item.yFaces{background: #FF7464;}

div.simpleRoad [class^="wheelBlock"] .item.xFaces{background: #141817;}
div.simpleRoad [class^="wheelBlock"] .item.yFaces{background: #313A3D;}
div.simpleRoad [class^="wheelBlock"] .item.zFaces{background: #262822;}

/* Spruce tree */

div.simpleRoad .spruceTreeBlock .item.xFaces{background: #140A03;}
div.simpleRoad .spruceTreeBlock .item.zFaces{background: #382211;}

div.simpleRoad [class^="spruceLeavesBlock"] .item.xFaces{background: #124501;}
div.simpleRoad [class^="spruceLeavesBlock"] .item.yFaces{background: #0C3A00;}
div.simpleRoad [class^="spruceLeavesBlock"] .item.zFaces{background: #1F5E06;}

/* Road light */

div.simpleRoad [class^="lightBodyBlock"] .item.xFaces{background: #454545;}
div.simpleRoad [class^="lightBodyBlock"] .item.yFaces{background: #646464;}
div.simpleRoad [class^="lightBodyBlock"] .item.zFaces{background: #292929;}

div.simpleRoad .lightBulbBlock1 .item{background: #ecf31c;}
div.simpleRoad .lightBulbBlock2 .item{background: #7b7b7b;}

/* Wind turbine */

div.simpleRoad .windTurbineGroundBlock1 .item.xFaces{background: #7d7d7d;}
div.simpleRoad .windTurbineGroundBlock1 .item.yFaces{background: #828282;}
div.simpleRoad .windTurbineGroundBlock1 .item.zFaces{background: #848484;}

div.simpleRoad [class^="windTurbineBlock"] .item.xFaces{background: #d5d5d5;}
div.simpleRoad [class^="windTurbineBlock"] .item.yFaces{background: #cbcbcb;}
div.simpleRoad [class^="windTurbineBlock"] .item.zFaces{background: #b0b0b0;}

div.simpleRoad [class^="windPropBlock"] .item.xFaces{background: #fafafa;}
div.simpleRoad [class^="windPropBlock"] .item.yFaces{background: #f0f0f0;}
div.simpleRoad [class^="windPropBlock"] .item.zFaces{background: #dadada;}


/** Animation
 *
 * Here are all the animation of the 3D world
 * Animation name are prefixed with SR for simple road in order to prevent conflict if used with other thing
 *
 */

/* Used once just after loading the page to make the 3D world appear*/
@keyframes SR-scaleIn{
  0% {transform: scale3d(0,0,0);}
}

/* Used once just after loading the page to make the 3D world appear*/
@keyframes SR-comeIn{
  0% {transform: translateY(500px); visibility: hidden;}
}

/* Used to cycle from bright to dark background */
@keyframes SR-timeCycle{
  0%   {opacity: 1;}
  42%  {opacity: 1;}
  58%  {opacity: 0;}
  100% {opacity: 0;}
}

/* Used to simulate that the car is moving forward by translating road stripes */
@keyframes SR-road{
  100% {transform: translateY(-25px);}
}

/* Used to make the wheel spin */
@keyframes SR-wheel{
  0%   {transform: rotateX(0deg) scale3d(.05,.1,.1);}
  100% {transform: rotateX(-360deg) scale3d(.05,.1,.1);}
}

/* Used to simulate the pitch of the car while driving */
@keyframes SR-drive{
  20%  {transform: translate3d(-18px,-5px,-50px);}
  80%  {transform: translate3d(-22px,-5px,-50px);}
}

/* Used to make the wind turbine spin */
@keyframes SR-windTurbineSpin{
  0%   {transform: translate3d(-15px,0,0) rotateX(0deg);}
  100% {transform: translate3d(-15px,0,0) rotateX(360deg);}
}

/* Used to make road element (tree, road ligh and wind turbine) pop-in  and pop-out the terrain */
@keyframes SR-roadElem{
  0%   {transform: translateZ(0px) scale3d(0,0,0);}
  5%  {transform: translateZ(-30px) scale3d(1,1,1);}
  45%  {transform: translateZ(-270px) scale3d(1,1,1);}
  50%, 100% {transform: translateZ(-300px) scale3d(0,0,0);}
}

/* When you hover the .speed div it change animaiton speed of each element that need it to do so in order to simulate a higher speed */

div.simpleRoad .speed:hover ~ div.wrapper3d .stripes,
div.simpleRoad .speed:hover ~ div.wrapper3d [class^="wheelBlock"]{
  animation-duration: .1s;
}

div.simpleRoad .speed:hover ~ div.wrapper3d .carBodyNode{
  animation-duration: 1s;
}

div.simpleRoad .speed:hover ~ div.wrapper3d [class^="spruceGroup"],
div.simpleRoad .speed:hover ~ div.wrapper3d [class^="lightGroup"],
div.simpleRoad .speed:hover ~ div.wrapper3d [class^="windPropNode"],
div.simpleRoad .speed:hover ~ div.wrapper3d .turbineGroup1{
  animation-duration: .3s;
}

div.simpleRoad .speed:hover + .day,
div.simpleRoad .speed:hover ~ div.wrapper3d .lightBulbBlock2 .item {
  animation-duration: 1s;
}
            
          
!
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