Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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

            
              <html>

<head>

</head>

<body>
    <div class="banner"  />
    <div class=inner-banner >
    
    
<!--     <div id="paal"><img src="paal.png"/></div> -->
    <div class="vbox">
        <div class="sterbox">
                  <div class="ster">
                    <svg    viewBox="0 0 257 257">
                    <style type="text/css">
                      .stero{fill:#FFFFFF;}
                      .steralpha{opacity:0;fill:#FFFFFF;}
                    </style>
                    <polygon class="stero" points="128.5,0.1 169.1,79.4 257,93.4 194.1,156.5 207.9,244.4 128.5,204.1 49.1,244.4 63,156.5 0.1,93.4 
                      88,79.4 "/>
                    <rect class="steralpha" width="257" height="257"/>
                    </svg>
                  </div>
                     <div class="ster2">
                    <svg    viewBox="0 0 257 257">
                    <style type="text/css">
                      .stero{fill:#FFFFFF;}
                      .steralpha{opacity:0;fill:#FFFFFF;}
                    </style>
                    <polygon class="stero" points="128.5,0.1 169.1,79.4 257,93.4 194.1,156.5 207.9,244.4 128.5,204.1 49.1,244.4 63,156.5 0.1,93.4 
                      88,79.4 "/>
                    <rect class="steralpha" width="257" height="257"/>
                    </svg>
                  </div>
                                    <div class="ster3">
                    <svg    viewBox="0 0 257 257">
                    <style type="text/css">
                      .stero{fill:#FFFFFF;}
                      .steralpha{opacity:0;fill:#FFFFFF;}
                    </style>
                    <polygon class="stero" points="128.5,0.1 169.1,79.4 257,93.4 194.1,156.5 207.9,244.4 128.5,204.1 49.1,244.4 63,156.5 0.1,93.4 
                      88,79.4 "/>
                    <rect class="steralpha" width="257" height="257"/>
                    </svg>
                  </div>
        </div>
        <div id="hoofdbox">
        <div id="hoofd">
                <!-- Voorkant gezicht -->
                <div id="hoofd1"></div>
                <!-- Dak hoofd -->
                <div id="hoofd5"></div>
                <!-- bodem hoofd -->
                 <div id="hoofd6"></div>

        </div>
        <div id="hoofda">
            <!-- Hoofd Links vlak -->
           <div id="hoofd2"><div id="oog">
               <svg id="ooga" viewBox="0 0 20 20"><defs>
               <style>.oogwit{fill:black;}
               .pupil{fill:#fff;}</style>
               </defs>
               <circle  class="oogwit" cx="10" cy="10" r="10"/>
               <ellipse class="pupil" cx="4.5" cy="4" rx="3" ry="1.5" transform="translate(-1.51 4.35) rotate(-45)"/></svg>

           </div></div>
           <!-- Hoofd Rechts vlak -->
           <div id="hoofd3"><div id="oog">
                   <svg id="ooga" viewBox="0 0 20 20"><defs>
               <style>.oogwit{fill:black;}
               .pupil2{fill:#fff;}</style>
               </defs>
               <circle  class="oogwit" cx="10" cy="10" r="10"/>
               <ellipse class="pupil2" cx="4.5" cy="4" rx="3" ry="1.5"  transform="translate(-1.51 4.35) rotate(-45)"/></svg>
           </div></div>
           <!-- Hoofd Achter -->
          <div id="hoofd4"></div>
        </div>
        </div>
        <div id="hoofdboxbek">
        <div id="bek">
                  <div id="bek1"></div>
                           <svg id="bek1a"  viewBox="0 0 100 100">
                               <defs> 
                               <style>
                               .bekalpha {fill:#fff;opacity:0; position: relative; width: 100%; height: 100%;}
                               .bekkleur {fill:#f15a24; position: relative; width: 100%; height: 100%;} </style>
                               </defs>
                               <rect class="bekalpha"/>
                               <polygon class="bekkleur" points="0,0 100,0 100,100 "/>

                           </svg>
                  <div id="bek2"></div>
                       <svg id="bek2a"  viewBox="0 0 100 100">
                               <defs> 
                               <style>
                               .bekalpha {fill:#fff;opacity:0; position: relative; width: 100%; height: 100%;}
                               .bekkleur2 {fill:#f15a24; position: relative; width: 100%; height: 100%;} </style>
                               </defs>
                               <rect class="bekalpha"/>
                               <polygon class="bekkleur" points="0,0 100,0 100,100 "/>

                           </svg>
                  <div id="bek3"></div>
                          <svg id="bek3a"  viewBox="0 0 100 100">
                               <defs> 
                               <style>
                               .bekalpha {fill:#fff;opacity:0; position: relative; width: 100%; height: 100%;}
                               .bekkleur {fill:#f15a24; position: relative; width: 100%; height: 100%;} </style>
                               </defs>
                               <rect class="bekalpha"/>
                               <polygon class="bekkleur3" points="100,0 100,100 0,50 "/>
                               <polygon class="bekkleur3" points="100,5 100,95 0,50 "/>
                           </svg>
           </div>
           </div>
       <div id="bodybox">
        <div id="body">
            <div id="body1"></div>
            <div id="body5"></div>
            <div id="body6"></div>
        </div>
           <div id="bodya">
            <div id="body2"></div>
            <div id="body3"></div>
            <div id="body4"></div>
        </div>
        </div>

        <div id="bodybox2">
        <div id="staartbox">
            <div id="staart">
                                       <svg id="staartsvg"  viewBox="0 0 170 100">
                               <defs> 
                               <style>
                               .staartalpha {fill:none;opacity:0; position: relative; width: 100%; height: 100%;}
                               .staartkleur {fill:#cccccc; position: relative; width: 100%; height: 100%;}
                                .staartzwart {fill:#4c4c4c; position: relative; width: 100%; height: 100%;} </style>
                               </defs>
                               <rect class="staartalpha"/>
                               <polygon class="staartkleur" points="0,100 170,100 135,0 35,0 "/>
                                <polygon id="staartzwart" points="6.76 80.69 163.24 80.69 156.61 61.74 13.39 61.74 6.76 80.69"/>
                           </svg>
                                </div>
        </div>
        <div id="body-2">
            <div id="body1-2"></div>
            <div id="body5-2"></div>
            <div id="body6-2"></div>
        </div>
           <div id="bodya-2">
            <div id="body2-2"></div>
            <div id="body3-2"></div>
            <div id="body4-2"></div>
        </div>
        </div>

        <div id="wingbox">
           <div id="wingl"><div id="wingl2"><div id="wingl2zwart"></div></div></div>
         <div id="wingr"> <div id="wingr2"><div id="wingr2zwart"></div></div></div>

        </div>
        <div id="pootbox">
           <div id="pootl"></div>
         <div id="pootr"></div>

        </div>
   
    </div>
        
<div class="buttons">
<div id="btnr">
  <svg version="1.1" id="pijl1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 119 113" style="enable-background:new 0 0 119 113;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
	<path class="st0" d="M59.1,36c0,0-0.5,0-1.4,0c-0.7,0-2,0.1-3.5,0.4c-1.5,0.3-3.3,0.7-5.3,1.6c-2,0.8-4.1,2.1-6.1,3.8
		c-2.1,1.8-3.9,4-5.4,6.7c-1.5,2.7-2.5,5.9-2.9,9.2c-0.1,0.4-0.1,0.8-0.1,1.3l0,0.6l0,0c0-0.2,0,0,0-0.1l0,0.1l0,0.2l0,0.4l0,1.4
		l0,0.7l0.1,0.6c0.1,0.8,0.2,1.7,0.4,2.5c0.2,0.9,0.4,1.7,0.7,2.6c1.1,3.4,3.1,6.7,5.6,9.4c2.6,2.7,5.7,4.8,9.2,6.1
		c3.4,1.3,7.1,1.9,10.7,1.7c3.5-0.2,6.9-1.1,9.9-2.6c3-1.4,5.5-3.4,7.5-5.5c2-2.1,3.5-4.3,4.5-6.5c0.1-0.3,0.3-0.5,0.4-0.8
		c0.1-0.3,0.2-0.5,0.3-0.8c0.2-0.5,0.4-1,0.6-1.5c0.3-1,0.5-1.9,0.8-2.7c0.1-0.8,0.3-1.6,0.4-2.2c0.1-0.7,0.1-1.2,0.2-1.7
		c0.1-0.9,0.1-1.4,0.1-1.4s0,0.5,0,1.4c0,0.5,0,1-0.1,1.7c-0.1,0.7-0.2,1.4-0.3,2.3c-0.2,0.8-0.4,1.8-0.7,2.8
		c-0.2,0.5-0.3,1-0.5,1.5c-0.1,0.3-0.2,0.5-0.3,0.8c-0.1,0.3-0.2,0.5-0.4,0.8c-0.9,2.2-2.4,4.6-4.3,6.9c-2,2.3-4.5,4.4-7.5,6.1
		c-3,1.7-6.6,2.8-10.4,3.2c-3.7,0.4-7.8,0-11.6-1.3c-3.8-1.3-7.5-3.4-10.5-6.3c-3-2.9-5.3-6.4-6.8-10.3c-0.4-0.9-0.7-1.9-1-2.9
		c-0.3-1-0.4-2-0.6-3.1l-0.1-0.8l-0.1-0.7l-0.1-1.4l0-0.3l0-0.2l0-0.1l0-0.2l0-0.7c0-0.5,0-1,0-1.5c0.2-4,1.3-7.8,2.9-11
		c1.6-3.3,3.8-6.1,6.1-8.3c2.4-2.2,4.9-3.9,7.2-5c2.4-1.2,4.6-1.9,6.4-2.3c1.9-0.4,3.3-0.6,4.4-0.7c0.9,0,1.4-0.1,1.4-0.1L59.1,36z"
		/>
</g>
<polygon class="st1" points="71.3,33.3 59.7,41 59.7,26 "/>
</svg>
  
  
  </div><div id="btnra">
  <svg version="1.1" id="pijl1a" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 119 113" style="enable-background:new 0 0 119 113;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
	<path class="st0" d="M59.1,36c0,0-0.5,0-1.4,0c-0.7,0-2,0.1-3.5,0.4c-1.5,0.3-3.3,0.7-5.3,1.6c-2,0.8-4.1,2.1-6.1,3.8
		c-2.1,1.8-3.9,4-5.4,6.7c-1.5,2.7-2.5,5.9-2.9,9.2c-0.1,0.4-0.1,0.8-0.1,1.3l0,0.6l0,0c0-0.2,0,0,0-0.1l0,0.1l0,0.2l0,0.4l0,1.4
		l0,0.7l0.1,0.6c0.1,0.8,0.2,1.7,0.4,2.5c0.2,0.9,0.4,1.7,0.7,2.6c1.1,3.4,3.1,6.7,5.6,9.4c2.6,2.7,5.7,4.8,9.2,6.1
		c3.4,1.3,7.1,1.9,10.7,1.7c3.5-0.2,6.9-1.1,9.9-2.6c3-1.4,5.5-3.4,7.5-5.5c2-2.1,3.5-4.3,4.5-6.5c0.1-0.3,0.3-0.5,0.4-0.8
		c0.1-0.3,0.2-0.5,0.3-0.8c0.2-0.5,0.4-1,0.6-1.5c0.3-1,0.5-1.9,0.8-2.7c0.1-0.8,0.3-1.6,0.4-2.2c0.1-0.7,0.1-1.2,0.2-1.7
		c0.1-0.9,0.1-1.4,0.1-1.4s0,0.5,0,1.4c0,0.5,0,1-0.1,1.7c-0.1,0.7-0.2,1.4-0.3,2.3c-0.2,0.8-0.4,1.8-0.7,2.8
		c-0.2,0.5-0.3,1-0.5,1.5c-0.1,0.3-0.2,0.5-0.3,0.8c-0.1,0.3-0.2,0.5-0.4,0.8c-0.9,2.2-2.4,4.6-4.3,6.9c-2,2.3-4.5,4.4-7.5,6.1
		c-3,1.7-6.6,2.8-10.4,3.2c-3.7,0.4-7.8,0-11.6-1.3c-3.8-1.3-7.5-3.4-10.5-6.3c-3-2.9-5.3-6.4-6.8-10.3c-0.4-0.9-0.7-1.9-1-2.9
		c-0.3-1-0.4-2-0.6-3.1l-0.1-0.8l-0.1-0.7l-0.1-1.4l0-0.3l0-0.2l0-0.1l0-0.2l0-0.7c0-0.5,0-1,0-1.5c0.2-4,1.3-7.8,2.9-11
		c1.6-3.3,3.8-6.1,6.1-8.3c2.4-2.2,4.9-3.9,7.2-5c2.4-1.2,4.6-1.9,6.4-2.3c1.9-0.4,3.3-0.6,4.4-0.7c0.9,0,1.4-0.1,1.4-0.1L59.1,36z"
		/>
</g>
<polygon class="st1" points="71.3,33.3 59.7,41 59.7,26 "/>
</svg></div>
  
<div id="btnr2">
  <div id="btnr2box"> <svg version="1.1" id="pijl2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 119 113" style="enable-background:new 0 0 119 113;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
	.st2{opacity:0.5;fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
	<path class="st0" d="M59.4,36c0,0-0.5,0-1.4,0c-0.7,0-2,0.1-3.5,0.4c-1.5,0.3-3.3,0.7-5.3,1.6c-2,0.8-4.1,2.1-6.1,3.8
		c-2.1,1.8-3.9,4-5.4,6.7c-1.5,2.7-2.5,5.9-2.9,9.2c-0.1,0.4-0.1,0.8-0.1,1.3l0,0.6l0,0c0-0.2,0,0,0-0.1l0,0.1l0,0.2l0,0.4l0,1.4
		l0,0.7l0.1,0.6c0.1,0.8,0.2,1.7,0.4,2.5c0.2,0.9,0.4,1.7,0.7,2.6c1.1,3.4,3.1,6.7,5.6,9.4c2.6,2.7,5.7,4.8,9.2,6.1
		c3.4,1.3,7.1,1.9,10.7,1.7c3.5-0.2,6.9-1.1,9.9-2.6c3-1.4,5.5-3.4,7.5-5.5c2-2.1,3.5-4.3,4.5-6.5c0.1-0.3,0.3-0.5,0.4-0.8
		c0.1-0.3,0.2-0.5,0.3-0.8c0.2-0.5,0.4-1,0.6-1.5c0.3-1,0.5-1.9,0.8-2.7c0.1-0.8,0.3-1.6,0.4-2.2c0.1-0.7,0.1-1.2,0.2-1.7
		c0.1-0.9,0.1-1.4,0.1-1.4s0,0.5,0,1.4c0,0.5,0,1-0.1,1.7c-0.1,0.7-0.2,1.4-0.3,2.3c-0.2,0.8-0.4,1.8-0.7,2.8
		c-0.2,0.5-0.3,1-0.5,1.5c-0.1,0.3-0.2,0.5-0.3,0.8c-0.1,0.3-0.2,0.5-0.4,0.8c-0.9,2.2-2.4,4.6-4.3,6.9c-2,2.3-4.5,4.4-7.5,6.1
		c-3,1.7-6.6,2.8-10.4,3.2c-3.7,0.4-7.8,0-11.6-1.3c-3.8-1.3-7.5-3.4-10.5-6.3c-3-2.9-5.3-6.4-6.8-10.3c-0.4-0.9-0.7-1.9-1-2.9
		c-0.3-1-0.4-2-0.6-3.1l-0.1-0.8l-0.1-0.7l-0.1-1.4l0-0.3l0-0.2l0-0.1l0-0.2l0-0.7c0-0.5,0-1,0-1.5c0.2-4,1.3-7.8,2.9-11
		c1.6-3.3,3.8-6.1,6.1-8.3c2.4-2.2,4.9-3.9,7.2-5c2.4-1.2,4.6-1.9,6.4-2.3c1.9-0.4,3.3-0.6,4.4-0.7c0.9,0,1.4-0.1,1.4-0.1L59.4,36z"
		/>
</g>
<polygon class="st1" points="70.7,33.3 59,41 59,26 "/>
<line class="st2" x1="20.7" y1="59" x2="7.3" y2="59"/>
<line class="st2" x1="111.7" y1="59" x2="98.3" y2="59"/>
<line class="st2" x1="60" y1="96.3" x2="60" y2="109.7"/>
<line class="st2" x1="60" y1="3.3" x2="60" y2="16.7"/>
</svg>

  </div>
  
  </div>
  <div id="btnr2a">
    <div id="btnr2abox">
      <svg version="1.1" id="pijl2a" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 119 113" style="enable-background:new 0 0 119 113;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
	.st2{opacity:0.5;fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
	<path class="st0" d="M59.4,36c0,0-0.5,0-1.4,0c-0.7,0-2,0.1-3.5,0.4c-1.5,0.3-3.3,0.7-5.3,1.6c-2,0.8-4.1,2.1-6.1,3.8
		c-2.1,1.8-3.9,4-5.4,6.7c-1.5,2.7-2.5,5.9-2.9,9.2c-0.1,0.4-0.1,0.8-0.1,1.3l0,0.6l0,0c0-0.2,0,0,0-0.1l0,0.1l0,0.2l0,0.4l0,1.4
		l0,0.7l0.1,0.6c0.1,0.8,0.2,1.7,0.4,2.5c0.2,0.9,0.4,1.7,0.7,2.6c1.1,3.4,3.1,6.7,5.6,9.4c2.6,2.7,5.7,4.8,9.2,6.1
		c3.4,1.3,7.1,1.9,10.7,1.7c3.5-0.2,6.9-1.1,9.9-2.6c3-1.4,5.5-3.4,7.5-5.5c2-2.1,3.5-4.3,4.5-6.5c0.1-0.3,0.3-0.5,0.4-0.8
		c0.1-0.3,0.2-0.5,0.3-0.8c0.2-0.5,0.4-1,0.6-1.5c0.3-1,0.5-1.9,0.8-2.7c0.1-0.8,0.3-1.6,0.4-2.2c0.1-0.7,0.1-1.2,0.2-1.7
		c0.1-0.9,0.1-1.4,0.1-1.4s0,0.5,0,1.4c0,0.5,0,1-0.1,1.7c-0.1,0.7-0.2,1.4-0.3,2.3c-0.2,0.8-0.4,1.8-0.7,2.8
		c-0.2,0.5-0.3,1-0.5,1.5c-0.1,0.3-0.2,0.5-0.3,0.8c-0.1,0.3-0.2,0.5-0.4,0.8c-0.9,2.2-2.4,4.6-4.3,6.9c-2,2.3-4.5,4.4-7.5,6.1
		c-3,1.7-6.6,2.8-10.4,3.2c-3.7,0.4-7.8,0-11.6-1.3c-3.8-1.3-7.5-3.4-10.5-6.3c-3-2.9-5.3-6.4-6.8-10.3c-0.4-0.9-0.7-1.9-1-2.9
		c-0.3-1-0.4-2-0.6-3.1l-0.1-0.8l-0.1-0.7l-0.1-1.4l0-0.3l0-0.2l0-0.1l0-0.2l0-0.7c0-0.5,0-1,0-1.5c0.2-4,1.3-7.8,2.9-11
		c1.6-3.3,3.8-6.1,6.1-8.3c2.4-2.2,4.9-3.9,7.2-5c2.4-1.2,4.6-1.9,6.4-2.3c1.9-0.4,3.3-0.6,4.4-0.7c0.9,0,1.4-0.1,1.4-0.1L59.4,36z"
		/>
</g>
<polygon class="st1" points="70.7,33.3 59,41 59,26 "/>
<line class="st2" x1="20.7" y1="59" x2="7.3" y2="59"/>
<line class="st2" x1="111.7" y1="59" x2="98.3" y2="59"/>
<line class="st2" x1="60" y1="96.3" x2="60" y2="109.7"/>
<line class="st2" x1="60" y1="3.3" x2="60" y2="16.7"/>
</svg>

    </div>
  </div>
<div id="btnr3">
  <div id="btnr3box">
    <svg version="1.1" id="pijl3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 119 113" style="enable-background:new 0 0 119 113;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
	.st2{opacity:0.5;fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
	<path class="st0" d="M59.4,36c0,0-0.5,0-1.4,0c-0.7,0-2,0.1-3.5,0.4c-1.5,0.3-3.3,0.7-5.3,1.6c-2,0.8-4.1,2.1-6.1,3.8
		c-2.1,1.8-3.9,4-5.4,6.7c-1.5,2.7-2.5,5.9-2.9,9.2c-0.1,0.4-0.1,0.8-0.1,1.3l0,0.6l0,0c0-0.2,0,0,0-0.1l0,0.1l0,0.2l0,0.4l0,1.4
		l0,0.7l0.1,0.6c0.1,0.8,0.2,1.7,0.4,2.5c0.2,0.9,0.4,1.7,0.7,2.6c1.1,3.4,3.1,6.7,5.6,9.4c2.6,2.7,5.7,4.8,9.2,6.1
		c3.4,1.3,7.1,1.9,10.7,1.7c3.5-0.2,6.9-1.1,9.9-2.6c3-1.4,5.5-3.4,7.5-5.5c2-2.1,3.5-4.3,4.5-6.5c0.1-0.3,0.3-0.5,0.4-0.8
		c0.1-0.3,0.2-0.5,0.3-0.8c0.2-0.5,0.4-1,0.6-1.5c0.3-1,0.5-1.9,0.8-2.7c0.1-0.8,0.3-1.6,0.4-2.2c0.1-0.7,0.1-1.2,0.2-1.7
		c0.1-0.9,0.1-1.4,0.1-1.4s0,0.5,0,1.4c0,0.5,0,1-0.1,1.7c-0.1,0.7-0.2,1.4-0.3,2.3c-0.2,0.8-0.4,1.8-0.7,2.8
		c-0.2,0.5-0.3,1-0.5,1.5c-0.1,0.3-0.2,0.5-0.3,0.8c-0.1,0.3-0.2,0.5-0.4,0.8c-0.9,2.2-2.4,4.6-4.3,6.9c-2,2.3-4.5,4.4-7.5,6.1
		c-3,1.7-6.6,2.8-10.4,3.2c-3.7,0.4-7.8,0-11.6-1.3c-3.8-1.3-7.5-3.4-10.5-6.3c-3-2.9-5.3-6.4-6.8-10.3c-0.4-0.9-0.7-1.9-1-2.9
		c-0.3-1-0.4-2-0.6-3.1l-0.1-0.8l-0.1-0.7l-0.1-1.4l0-0.3l0-0.2l0-0.1l0-0.2l0-0.7c0-0.5,0-1,0-1.5c0.2-4,1.3-7.8,2.9-11
		c1.6-3.3,3.8-6.1,6.1-8.3c2.4-2.2,4.9-3.9,7.2-5c2.4-1.2,4.6-1.9,6.4-2.3c1.9-0.4,3.3-0.6,4.4-0.7c0.9,0,1.4-0.1,1.4-0.1L59.4,36z"
		/>
</g>
<polygon class="st1" points="70.7,33.3 59,41 59,26 "/>
<line class="st2" x1="20.7" y1="59" x2="7.3" y2="59"/>
<line class="st2" x1="111.7" y1="59" x2="98.3" y2="59"/>
<line class="st2" x1="60" y1="96.3" x2="60" y2="109.7"/>
<line class="st2" x1="60" y1="3.3" x2="60" y2="16.7"/>
</svg>

  </div></div>
  <div id="btnr3a"><div id="btnr3abox">
    <svg version="1.1" id="pijl3a" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 119 113" style="enable-background:new 0 0 119 113;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
	.st2{opacity:0.5;fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
	<path class="st0" d="M59.4,36c0,0-0.5,0-1.4,0c-0.7,0-2,0.1-3.5,0.4c-1.5,0.3-3.3,0.7-5.3,1.6c-2,0.8-4.1,2.1-6.1,3.8
		c-2.1,1.8-3.9,4-5.4,6.7c-1.5,2.7-2.5,5.9-2.9,9.2c-0.1,0.4-0.1,0.8-0.1,1.3l0,0.6l0,0c0-0.2,0,0,0-0.1l0,0.1l0,0.2l0,0.4l0,1.4
		l0,0.7l0.1,0.6c0.1,0.8,0.2,1.7,0.4,2.5c0.2,0.9,0.4,1.7,0.7,2.6c1.1,3.4,3.1,6.7,5.6,9.4c2.6,2.7,5.7,4.8,9.2,6.1
		c3.4,1.3,7.1,1.9,10.7,1.7c3.5-0.2,6.9-1.1,9.9-2.6c3-1.4,5.5-3.4,7.5-5.5c2-2.1,3.5-4.3,4.5-6.5c0.1-0.3,0.3-0.5,0.4-0.8
		c0.1-0.3,0.2-0.5,0.3-0.8c0.2-0.5,0.4-1,0.6-1.5c0.3-1,0.5-1.9,0.8-2.7c0.1-0.8,0.3-1.6,0.4-2.2c0.1-0.7,0.1-1.2,0.2-1.7
		c0.1-0.9,0.1-1.4,0.1-1.4s0,0.5,0,1.4c0,0.5,0,1-0.1,1.7c-0.1,0.7-0.2,1.4-0.3,2.3c-0.2,0.8-0.4,1.8-0.7,2.8
		c-0.2,0.5-0.3,1-0.5,1.5c-0.1,0.3-0.2,0.5-0.3,0.8c-0.1,0.3-0.2,0.5-0.4,0.8c-0.9,2.2-2.4,4.6-4.3,6.9c-2,2.3-4.5,4.4-7.5,6.1
		c-3,1.7-6.6,2.8-10.4,3.2c-3.7,0.4-7.8,0-11.6-1.3c-3.8-1.3-7.5-3.4-10.5-6.3c-3-2.9-5.3-6.4-6.8-10.3c-0.4-0.9-0.7-1.9-1-2.9
		c-0.3-1-0.4-2-0.6-3.1l-0.1-0.8l-0.1-0.7l-0.1-1.4l0-0.3l0-0.2l0-0.1l0-0.2l0-0.7c0-0.5,0-1,0-1.5c0.2-4,1.3-7.8,2.9-11
		c1.6-3.3,3.8-6.1,6.1-8.3c2.4-2.2,4.9-3.9,7.2-5c2.4-1.2,4.6-1.9,6.4-2.3c1.9-0.4,3.3-0.6,4.4-0.7c0.9,0,1.4-0.1,1.4-0.1L59.4,36z"
		/>
</g>
<polygon class="st1" points="70.7,33.3 59,41 59,26 "/>
<line class="st2" x1="20.7" y1="59" x2="7.3" y2="59"/>
<line class="st2" x1="111.7" y1="59" x2="98.3" y2="59"/>
<line class="st2" x1="60" y1="96.3" x2="60" y2="109.7"/>
<line class="st2" x1="60" y1="3.3" x2="60" y2="16.7"/>
</svg>

  </div>
  
  </div>
</div>

        
    </div>
    </div>
    






</body>
            
          
!

CSS

            
              
.banner {
  width: 100vw;
  height: 100vw;
  
  overflow: hidden;
  position: relative;
  cursor: pointer; 
background-color: #90bfdf}


#paal {
  position: absolute;
  left: 220px;
  top: 625px;

}

#paal img {
  width: 600px;
}

.inner-banner {
  width: 100vw;
  height: 100vw;
  position: absolute;
  overflow: hidden;
  cursor: pointer;
  top: 0; }


#hoofdbox {
  position: relative;
  width: 30%;
  height: 30%;
  top: 10%;
  left: 24%;
}

#hoofdboxbek {
  position: relative;
  width: 30%;
  height: 30%;
  top: -20%;
  left: 24%;
}
.vbox {
  position: absolute;
  width: 30vw;
  height:30vw;
  left: 5vw;
  top: 5vw;
  /*border: dashed blue 1px;*/
}


#bek {
top: 0%;
left: -55%;
width: 100%;
height: 100%;
position: relative;

}

#bek1 {
  position: relative;
  width: 66.66%;
  height: 66.66%;
  left: 0.20%;
 /* background-color:  #d05f15;
-webkit-clip-path: polygon(0 0, 85% 90%, 100% 0);
clip-path: polygon(0 0, 85% 90%, 100% 0);*/

}
#bek1a {
  position: absolute;
  width: 66.66%;
  height: 66.66%;
  left: 0.20%;
  top: 0;
/* background-color:  #d05f15;
-webkit-clip-path: polygon(0 0, 85% 90%, 100% 0);
clip-path: polygon(0 0, 85% 90%, 100% 0);*/

}


#bek2 {
  position: relative;
  width: 66.66%;
  height: 66.66%;
  left: 0.20%;
  top:-67%;
/* background-color: #d86221;
-webkit-clip-path: polygon(0 0, 85% 90%, 100% 0);
clip-path: polygon(0 0, 85% 90%, 100% 0);*/
}
#bek2a {
  position: absolute;
  width: 66.66%;
  height: 66.66%;
  left: 0.20%;
  top:0%;

}




#pootbox {
      top: -95%;
    left: 30%;
    width: 30%;
    height: 30%;
  position: relative;

}
#pootr {
  top: 10px;
  left: 93.33%;
  width: 6.66%;
  height: 100%;
  position: absolute;
background-color: black;
}
#pootl {
  top: 93.33%;
  left: 93.33%;
  width: 6.66%;
  height: 100%;
  position: absolute;
background-color: black;
}

/* top snafel */
#bek3 {
  position: relative;
      width: 66.66%;
    height: 67%;
    top: -159%;
    left: -10%;
 /*background-color: #ed5f18;
-webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
clip-path: polygon(100% 0, 100% 100%, 0 50%);*/
}
#bek3a {
  position: absolute;
      width: 66.66%;
    height: 67%;
    top: -26%;
    left: -10%;

}

#hoofd {
  top: 0%;
  left: 13.33%;
    width: 100%;
  height: 100%;
  position: relative;
/**/

}
#hoofda {
  top: -100%;
  left: 0%;
    width: 100%;
  height: 100%;
  position: relative;
/**/

}

#oog {
  position: relative;
  top:16%;
  left: 46.66%;
  width: 10%;
  height: 10%;
 /* background: black;
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);*/

}
#ooga {
  position: absolute;
  top:0%;
  left: 0%;
  width: 100%;
  height: 100%;
 /* background: black;
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);*/

}
/*links, rechts achter, rechts, voorkant, top*/

#hoofd1 {
  background-color: #e8e8e8;
    position: relative;
  width: 100%;
  height: 100%;
  left: -62%;
}
#hoofd2 {
  background-color: #ededed;
  position: relative;
  top: 50%;
  width: 100%;
  height: 100%;
}
#hoofd3 {
  background-color: #ffffff; /* #595151; */
    position: relative;
     top: -150%;
  width: 100%;
  height: 100%;
}
#hoofd4 {
  background-color: #948c8c;
    position: relative;
      left: 50.5%;
    top: -200%;
  width: 100%;
  height: 100%;
}
#hoofd5 {
  top:-150%;
  left: -13.33%;
  background-color: #ffffff;
    position: relative;
  width: 100%;
  height: 100%;
}
#hoofd6 {
  top: -150%;
  left: -13.33%;
  background-color: #ffffff;
    position: relative;
  width: 100%;
  height: 100%;
}


#bodybox {
  top: -20%;
  left: 24%;
  width: 30%;
  height: 30%;
    position: relative;
}
#bodybox2 {
  top: -50%;
  left: 54%;
   width: 30%;
  height: 30%;
    position: relative;
}
#staartbox {
  top: 0%;
    left: 50%;
   width: 100%;
  height: 100%;
    position: relative;
}

#staart {
    position: relative;
     left: -33.33%;
    top: 0%;
    width: 166.66%;
    height: 100%;
    /*
    background-color: #cccccc; 
-webkit-clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);*/
}
#staartsvg {
    position: absolute;
     left: -33.33%;
    top: 0%;
    width: 166.66%;
    height: 100%;
   overflow: hidden;
}

#staartzwart {
    position: absolute;
 /*   left: 0%;
    bottom: -60%;
    width: 100%;
    height: 25%; */
    background-color: #4c4c4c;

}
.sterbox{
  position: absolute;
    top: -20%;
    left: 20%;
    fill: #fff;
    width: 40%;
    height: 40%;

}
.ster{
    position: absolute;
    top: -29%;
    left: 20%;
    fill: #fff;
    width: 30%;
    height: 30%;
}
.ster2{
    position: absolute;
    top: 45%;
    left: 60%;
    fill: #fff;
    width: 30%;
    height: 30%;
}
.ster3{
    position: absolute;
    top: 45%;
    left: -20%;
    fill: #fff;
    width: 30%;
    height: 30%;
}

#body {
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  position: relative;

}
#bodya {
  top: -100%;
  left: -0%;
  width: 100%;
  height: 100%;
  position: relative;

}
#bodya-2 {
  top: -200%;
  left: -0%;
  width: 100%;
  height: 100%;
  position: relative;
}
#body-2 {
  top: -100%;
  left: 0%;
  width: 100%;
  height: 100%;
  position: relative;

}

/*links, rechts achter, rechts, voorkant, top*/

#body1 {
  background-color: #b7b7b7;
    position: relative;
  width: 100%;
  height: 100%;
  left: -50%;
}
#body2 {
  background-color: #cdc3c3;
    position: relative;
    top: -50%;
    width: 100%;
    height: 100%;
}
#body3 {
  background-color: #b7b7b7; /* #595151; */
    position: relative;
     top: -50%;
  width: 100%;
  height: 100%;
}
#body4 {
  /*background-color: #948c8c;*/
  position: relative;
  left: 50%;
  top: -200%;
  width: 100%;
  height: 100%;
}
#body5 {
  top:-150%;
  left: -0%;
  /*background-color: #ffffff;*/
    position: relative;
  width: 100%;
  height: 100%;
}
#body6 {
  top:-150%;
  left: -0%;
  background-color: #ffffff;
    position: relative;
  width: 100%;
  height: 100%;
}


#body1-2 {
  /*background-color: #565454;*/
    position: relative;
  width: 100%;
  height: 100%;
  left: -50%;
}
#body2-2 {
  background-color: #cdc3c3;
    position: relative;
    top: 50%;
    width: 100%;
    height: 100%;
}
#body3-2 {
  background-color: #ffffff; /* #595151; */
    position: relative;
    top: -150%;
    width: 100%;
    height: 100%;
}
#body4-2 {
  background-color: #948c8c;
    position: relative;
    left: 50%;
    top: -200%;
    width: 100%;
    height: 100%;
}
#body5-2 {
  top:-150%;
  left: -0%;
  background-color: #ffffff;
    position: relative;
  width: 100%;
  height: 100%;
}
#body6-2 {
  top:-150%;
  left: -0%;
  background-color: #ffffff;
  position: relative;
  width: 100%;
  height: 100%;
}

#wingbox {
  top: -95%;
    left: 40%;
    width: 30%;
    height: 30%;
    position: relative;
    
}
#wingl {
  top: 100%;
    left: 0%;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #af8e8e;
}
#wingl2 {
  top: 100%;
    left: 0%;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #af8e8e;
}
#wingl2zwart {
    top: 90%;
    left: 0%;
    width: 100%;
    height: 10%;
    position: relative;
    background-color: #686868;
}

#wingr {
  bottom:  100%;
    left: 0%;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #af8e8e;
}
#wingr2 {
  top:  100%;
    left: 0%;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #af8e8e;
}
#wingr2zwart {
    top: 90%;
    left: 0%;
    width: 100%;
    height: 10%;
    position: relative;
    background-color: #686868;
}


.buttons {
  position: absolute;
  top: 40vw;
  left: 10vw;
  height: 50px;
  width: 600px;
}

#btnr, #btnra, #btnr3, #btnr3a, #btnr2, #btnr2a {
  border: solid #00b709 3px;
}


#btnr {
  position: absolute;
  width: 60px;
  height: 50px;
  background: #282828;
 border-radius: 10px;
z-index: 899;
overflow: hidden;
  clip: rect(0px, 50px, 56px, 0px);
}


#pijl1 {
  width: 50px;
}
#btnra {
  position: absolute;
  left: 40px;
  width: 55px;
  height: 50px;
  background: red;
 border-radius: 10px;
  background: #3f3f3f;
    clip: rect(0px, 66px, 56px, 10px);
z-index: 999;
}
#pijl1a {
  margin-left: 5px;
  width: 50px;
  -moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
#btnr2box, #btnr2abox {
  position: absolute;
  left: 0px;
  height: 50px;
  width:60px;
  bottom: 10px;
}

#btnr2 {
  position: absolute;
  width: 60px;
  height: 50px;
  background: #282828;
 border-radius: 10px;
  clip: rect(0px, 50px, 56px, 0px);
z-index: 899;
left: 200px;
}
#pijl2 {
  margin-left: 0px;
  width: 50px;
  
}
#btnr2a {
  position: absolute;
  left: 40px;
 width: 55px;
  height: 50px;
  background: red;
 border-radius: 10px;
 background: #3f3f3f;
     clip: rect(0px, 66px, 56px, 10px);
z-index: 999;
left: 240px;
}

#pijl2a {
  margin-left: 5px;
  width: 50px;
   -moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}


#btnr3 {
  position: absolute;
  width: 60px;
  height: 50px;
  background: #282828;
 border-radius: 10px;
  clip: rect(0px, 50px, 56px, 0px);
z-index: 899;
left: 400px;
}
#pijl3{
   -moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
#btnr3box {
  position: absolute;
  right: 10px;
  width: 50px;
  height: 50px;
}
#btnr3a {
  position: absolute;
  left: 40px;
 width: 55px;
  height: 50px;
 border-radius: 10px;
 background: #3f3f3f;
     clip: rect(0px, 66px, 56px, 10px);
z-index: 999;
left: 440px;
}
#pijl3a {
  margin-left: 10px;
  width: 50px;
}
#btnr3abox {
  position: absolute;
  right: 5px;
  width: 50px;
  height: 50px;
}
            
          
!

JS

            
              /* chapters of the js code*/
/* 1 - animation - head movement. line 7 */
/* 2 - animation - wings, tail. line 51 */
/* 3 - rigging - whole body. line 84 */
/* 4 - button - rotation. line 150 */

/* 1. animation part, moving the head to the curser */
var $box = $('#hoofdbox, #hoofdboxbek');

var $box = $('#hoofdbox, #hoofdboxbek');
var $container = $(".banner");

var enabled = false;
var left = $container.offset().left;
var max  = $container.outerWidth() - $box.outerWidth();

function moveBox(e) {
  var x = e.pageX - left;
  if (x > max) { x = max; }

    var y = e.pageY - left;
  if (y > max) { y = max; }

  TweenMax.to($box, 0.5, {rotationY: +x/50,     ease: Power1.easenone  });
  TweenMax.to($box, 0.5, {rotation: -y/30,    ease: Power1.easenone  });
};

function moveBoxBack() {  
  $container.off("mousemove", moveBox);
  enabled = false;
  TweenMax.to($box, 0.75, { rotationY: 0, ease: Back.easeOut });
};

function enableMovement() {
  if (enabled) return;
  enabled = true;
  $container.on("mousemove", moveBox);
}

$box.on("mouseenter", enableMovement);
$container.on("mouseleave", moveBoxBack);





    /* -----------------------------------*/
    /* ***      Main TimelineLite     *** */
    /* -----------------------------------*/
    /*2. animation part */
 var tl4 = new TimelineMax ({delay:0.0, onComplete:function() {
    this.restart()}});
          tl4.to(".sterbox ", 6, {rotationY:"+=720", transformOrigin:"50% 50% 10%",ease: Power0.easeNone,  }, "=+0.0")
          tl4.to(".sterbox ", 3, {rotationX:"-=10", transformOrigin:"50% 50% 10%",ease: Power0.easeNone,  }, "=-6.0")
          tl4.to(".sterbox ", 3, {rotationX:"+=10", transformOrigin:"50% 50% 10%",ease: Power0.easeNone,  }, "=-3.0")

              TweenMax.set(".sterbox", {rotationX:90, transformStyle: "preserve-3d" });
              TweenMax.set(".ster", {rotationX:-90,  });
              TweenMax.set(".ster2", {rotationX:-90, rotation:120});
              TweenMax.set(".ster3", {rotationX:-90, rotation:240});


      var tl3 = new TimelineMax ({delay:0.0, onComplete:function() {
    this.restart()}});

    var tl2 = new TimelineMax ({delay:3.0, onComplete:function() {
    this.restart()}});




      tl3.to("#staart", 0.1, {rotationX: 140 ,transformOrigin: "0% 0%", yoyo:true, repeat:2,  }, "=+1.5")
    
     tl2.to("#wingl ", 1, {rotationX: 20 ,transformOrigin: "0% 0%",ease: Back.easeOut.config(6),  yoyo:true, repeat:1,}, "=+2.5")
      tl2.to("#wingl2 ", 1, { rotationX: "+=160" ,transformOrigin: "0% 0%",ease: Back.easeOut.config(2),  yoyo:true, repeat:1,}, "=-2")
       //tl2.to("#wingl2 ", 1.5, {skewX:30}, "=-3.0")
      tl2.to("#wingr ", 1, { rotationX: -200 ,transformOrigin: "0% 0%",ease: Back.easeOut.config(6),  yoyo:true, repeat:1,}, "=-2")
    //tl2.to("#wingr2 ", 1.5, {skewX:30}, "=-1.5")
      tl2.to("#wingr2 ", 1, {rotationX: "-=180" ,transformOrigin: "0% 0%",ease: Back.easeOut.config(1),  yoyo:true, repeat:1,}, "=-2")
   
  

    //3. Set animation, this is were the bird is put togheter from divs and svg's.
  
    TweenMax.set("vbox ", {perspective: 800,transformStyle: "preserve-3d" });
    TweenMax.set(".vboxa", { rotationY: 90 , transformStyle: "preserve-3d", transformOrigin: "50% 100%"  });
    TweenMax.set("#hoofdbox, #hoofdboxbek, .inner-banner, #wingbox, #wingl, #wingr, #staartbox, #bodybox, #bodybox2, #body-2, #bodya-2, #body, #bodya, #hoofd, #hoofda, #bek, #body, #pootbox, #pootr, #pootl, .vbox, #bek1, #bek2 ", {transformStyle: "preserve-3d" });

    TweenMax.set(".vbox ", {rotationY: 120, transformOrigin: "50% 50%" });

    // Snavel
    TweenMax.set("#bek1", { rotationY: -25, transformOrigin: "0% 100%"  });
    TweenMax.set("#bek1", { rotationX: -28, transformOrigin: "100% 100%"  });

     TweenMax.set("#bek1a", { rotationY: -25, transformOrigin: "0% 100%"  });
    TweenMax.set("#bek1a", { rotationX: -28, transformOrigin: "100% 100%"  });
   // TweenMax.set("#bek1", { rotationZ: -8, transformOrigin: "100% 100%"  });

    TweenMax.set("#bek2", { rotationY: 25 , transformOrigin: "0% 100%"  });
    TweenMax.set("#bek2", { rotationX: 28, transformOrigin: "100% 100%"  });

        TweenMax.set("#bek2a", { rotationY: 25 , transformOrigin: "0% 100%"  });
    TweenMax.set("#bek2a", { rotationX: 28, transformOrigin: "100% 100%"  });
   // TweenMax.set("#bek2", { rotationZ: -8, transformOrigin: "100% 100%"  });


    TweenMax.set("#bek3", { rotationX: 90 ,transformOrigin: "100% 50%"  });
        TweenMax.set("#bek3a", { rotationX: 90 ,transformOrigin: "100% 50%"  });

    //Hoofd
    TweenMax.set("#hoofd1", { rotationY: 90 ,transformOrigin: "50% 0%"  });
    TweenMax.set("#hoofd2", { rotationX: -90,transformOrigin: "100% 50%"  });
    TweenMax.set("#hoofd3", { rotationX: -90,transformOrigin: "100% 50%"  });
    TweenMax.set("#hoofd4", { rotationY: -90,transformOrigin: "50% 100%"  });

    TweenMax.set("#hoofd5", { rotationX: 90 ,transformOrigin: "100% 50%"  });
    TweenMax.set("#hoofd6", { rotationX: 90 ,transformOrigin: "100% 50%"  });
    TweenMax.set("#hoofda", { rotationX: 90 ,transformOrigin: "100% 50%"  });
    //body 1&2
    TweenMax.set("#body1,#body1-2", { rotationY: 90 ,transformOrigin: "50% 0%"  });
    TweenMax.set("#body2,#body2-2", { rotationX: -90,transformOrigin: "100% 50%"  });
    TweenMax.set("#body3,#body3-2", { rotationX: -90,transformOrigin: "100% 50%"  });
    TweenMax.set("#body4,#body4-2", { rotationY: -90,transformOrigin: "50% 100%"  });

    TweenMax.set("#body5,#body5-2", { rotationX: 90 ,transformOrigin: "100% 50%"  });
    TweenMax.set("#body6,#body6-2", { rotationX: 90 ,transformOrigin: "100% 50%"  });
    TweenMax.set("#bodya,#bodya-2", { rotationX: 90 ,transformOrigin: "100% 50%"  });
    //staart
     TweenMax.set("#staartbox", { rotationY: 90 ,transformOrigin: "50% 50%"  });
     TweenMax.set("#staart", { rotationX: 120 ,transformOrigin: "0% 0%"  });

      TweenMax.set("#bodybox", { rotationZ: 0 ,transformOrigin: "0% 0%"  });
      TweenMax.set("#wingbox", { rotationX: 90 ,transformOrigin: "50% 50%"  });

      TweenMax.set("#wingl", { rotationX: -80 ,transformOrigin: "0% 0%",   });//skewX: 30
      TweenMax.set("#wingl2", { rotationX: 181 ,transformOrigin: "0% 0%", skewX: -30 });

      TweenMax.set("#wingr", { rotationX: -110 ,transformOrigin: "0% 0%",  });//skewX: 30 
      TweenMax.set("#wingr2", { rotationX: -181 ,transformOrigin: "0% 0%", skewX: -30 });

      TweenMax.set("#pootbox", { rotationX: 90 ,transformOrigin: "50% 50%"  });
      TweenMax.set("#pootl", { rotationX: -90, rotationZ: -90 ,transformOrigin: "0% 0%"  });
      TweenMax.set("#pootr", { rotationX: -90, rotationZ: -90 ,transformOrigin: "0% 0%"  });





/* 4 - buttons - rotation, 
increase size whit the "d" key and decrease whit the "a" key */


    TweenMax.set(".cardWrapper2", { perspective: 800 });
    TweenMax.set(".card2", { transformStyle: "preserve-3d" });


    TweenMax.set(".cardWrapper3", { perspective: 800 });
    TweenMax.set(".card3", { transformStyle: "preserve-3d" });
    TweenMax.set(".card3", {scaleX:1.45, rotationX: -195, rotationY: -45, rotation: 5, transformOrigin: "95% 95%" });

        TweenMax.set("#btnra img", { rotationY: 180 });
        TweenMax.set("#btnr2abox", {perspective: 400, rotationX:52, transformOrigin: "50% 100%"});
        TweenMax.set("#btnr2box", {perspective: 400, rotationX:52, transformOrigin: "50% 100%"});
        TweenMax.set("#btnr2a img", { rotationY: 180 });
        TweenMax.set("#btnr3abox", {perspective: 400, rotationY:52, transformOrigin: "50% 100%"});
        TweenMax.set("#btnr3box", {perspective: 400, rotationY:52, transformOrigin: "50% 100%"});
        TweenMax.set("#btnr3a img", { rotationZ: 180, rotation: 180 });

    $(window).keydown(function(e){
         if (e.keyCode == 68 )
   {
      
         TweenLite.to($(".vbox"), .5, {css: {height:"+=50px"}, transformOrigin: "50% 50%"});
        TweenLite.to($(".vbox"), .5, {css: {width:"+=50px"}, transformOrigin: "50% 50%"});
    }
      if  (e.keyCode == 65)
     {
    TweenLite.to($(".vbox"), .5, {css: {height:"-=50px"}, transformOrigin: "50% 50%"});
        TweenLite.to($(".vbox"), .5, {css: {width:"-=50px"}, transformOrigin: "50% 50%"});
    };

    });


 var $btnr = $('#btnr');
    $btnr.hover(
        function() {
        TweenLite.to($("#pijl1"), .5, {rotation: "+=30"}),
        TweenLite.to($("#pijl1a"), .5, {rotation: "+=30"}),
        TweenLite.to($(".vbox"), .5, {rotationZ:"+=30", transformOrigin: "50% 100%",});
    }); 
    var $btnra = $('#btnra');
    $btnra.hover(
        function() {
        TweenLite.to($("#pijl1a"), .5, {rotation: "-=30"}),
        TweenLite.to($("#pijl1"), .5, {rotation: "-=30"}),
        TweenLite.to($(".vbox"), .5, {rotationZ:"-=30", transformOrigin: "50% 100%",});
    }); 



    var $btnr2a = $('#btnr2a');
    $btnr2a.hover(
        function() {
            TweenLite.to($("#pijl2"), .5, {rotation: "-=30",  transformOrigin: "50% 55%"}),
            TweenLite.to($("#pijl2a"), .5, {rotation: "-=30",  transformOrigin: "50% 55%"}),
        TweenLite.to($(".vbox"), .5, {rotationY:"+=30", transformOrigin: "50% 100%",});
    }); 
        var $btnr2 = $('#btnr2');
    $btnr2.hover(
        function() {
            TweenLite.to($("#pijl2a"), .5, {rotation: "+=30",  transformOrigin: "50% 55%"}),
            TweenLite.to($("#pijl2"), .5, {rotation: "+=30",  transformOrigin: "50% 55%"}),
        TweenLite.to($(".vbox"), .5, {rotationY:"-=30", transformOrigin: "50% 100%",});
    }); 

    var $btnr3 = $('#btnr3');
    $btnr3.hover(
        function() {
            TweenLite.to($("#pijl3"), .5, {rotation: "-=30", transformOrigin: "50% 50%"}),
        TweenLite.to($("#pijl3a"), .5, {rotation: "-=30", transformOrigin: "50% 50%"}),
        TweenLite.to($(".vbox"), .5, {rotationX:"+=30", transformOrigin: "50% 100%",});
    }); 
    var $btnr3a = $('#btnr3a');
    $btnr3a.hover(
        function() {
        TweenLite.to($("#pijl3a"), .5, {rotation: "+=30", transformOrigin: "50% 50%"}),
        TweenLite.to($("#pijl3"), .5, {rotation: "+=30", transformOrigin: "50% 50%"}),
        TweenLite.to($(".vbox"), .5, {rotationX:"-=30", transformOrigin: "50% 100%",});
    }); 




            
          
!
999px

Console