cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <div class="hipster-holder" id="foldable-traqball">
  <div class="hipster-preview">
    <div class="hipster front">
      <div id="hipster-head" class="cube">
        <div class="surface top" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="hair" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);"></li>
          </ul>
        </div>
        <div class="surface front" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="face" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);"></li>
          </ul>
        </div>
        <div class="surface right" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="hair" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);"></li>
          </ul>
        </div>
        <div class="surface back" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="hair" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);"></li>
          </ul>
        </div>
        <div class="surface left" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="hair" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);"></li>
          </ul>
        </div>
        <div class="surface bottom" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);"></div>
      </div>
      
      <div id="hipster-body" class="cube">
        <div class="surface top" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);"></div>
        <div class="surface front" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="shirt" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_upsidedown.png);"></li>
          </ul>
        </div>
        <div class="surface right" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="shirt" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_upsidedown.png);"></li>
          </ul>
        </div>
        <div class="surface back" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="shirt" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_upsidedown.png);"></li>
          </ul>
        </div>
        <div class="surface left" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="shirt" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_upsidedown.png);"></li>
          </ul>
        </div>
        <div class="surface bottom" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="shirt" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_upsidedown.png);"></li>
          </ul>
        </div>
      </div>
      
      <div id="hipster-arm-left" class="cube">
        <div class="surface top" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="shirt" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_upsidedown.png);"></li>
          </ul>
        </div>
        <div class="surface front" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="shirt" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_upsidedown.png);"></li>
          </ul>
        </div>
        <div class="surface right" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="shirt" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_upsidedown.png);"></li>
          </ul>
        </div>
        <div class="surface back" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="shirt" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_upsidedown.png);"></li>
          </ul>
        </div>
        <div class="surface left" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="shirt" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_upsidedown.png);"></li>
          </ul>
        </div>
        <div class="surface bottom" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_upsidedown.png);"></div>
      </div>
      
      <div id="hipster-arm-right" class="cube">
        <div class="surface top" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="shirt" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_upsidedown.png);"></li>
          </ul>
        </div>
        <div class="surface front" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="shirt" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_upsidedown.png);"></li>
          </ul>
        </div>
        <div class="surface right" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="shirt" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_upsidedown.png);"></li>
          </ul>
        </div>
        <div class="surface back" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="shirt" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_upsidedown.png);"></li>
          </ul>
        </div>
        <div class="surface left" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted.png);">
          <ul>
            <li class="shirt" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_upsidedown.png);"></li>
          </ul>
        </div>
        <div class="surface bottom" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_upsidedown.png);"></div>
      </div>
      
      <div id="hipster-feet" class="cube">
        <div class="surface front" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_side.png);">
          <ul>
            <li class="trousers" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_side.png);"></li>
          </ul>
        </div>
        <div class="surface right" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_side.png);">
          <ul>
            <li class="trousers" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_side.png);"></li>
          </ul>
        </div>
        <div class="surface back" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_side.png);">
          <ul>
            <li class="trousers" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_side.png);"></li>
          </ul>
        </div>
        <div class="surface left" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_side.png);">
          <ul>
            <li class="trousers" style="background-image:url(https://raw.github.com/peterwestendorp/foldable-me-experimental/master/assets/foldable_adjusted_side.png);"></li>
          </ul>
        </div>
        <div class="surface bottom" style="background:transparent;"></div>
      </div>
    </div>
  </div>
</div>
            
          
!
            
              div.hipster-holder {
  width: 500px;
  height:500px;
  margin:3% auto;
  perspective: 1500px;
}

.hipster-preview {
  width:310px;
  margin:0 auto;
  perspective-origin: 50% 50%;
  transform-origin: 140px 50%;
  transform-style:  preserve-3d;
}
.hipster-preview .hipster {
  position: relative;
  width: 400px;
  height: 500px;
  margin: 0 auto;
  padding: 0;
  transform-style:  preserve-3d;
  transform:rotateX(-20deg) rotateY(-30deg) scale3d(0.85, 0.85, 0.85);
  animation:  roundandround 10s infinite linear;
}
.hipster-preview .cube {
  position: absolute;
  margin: 0 auto;
  transform-style:  preserve-3d;
}
.hipster-preview .surface {
  position: absolute;
  height: 300px;
  width: 300px;
  background-color:#CCCCCC;
  background-repeat:no-repeat;
  border: 1px solid #333333;
  backface-visibility:  hidden;
  transform-style:  flat;
}
.hipster-preview .surface ol,
.hipster-preview .surface ul {
  display:block;
  margin:0;
}
.hipster-preview .surface ul li {
  list-style: none;
}
.hipster-preview .surface .photon-shader {
  z-index: 1;
}

/* head */
.hipster-preview #hipster-head {
  width:292px;
  height:202px;
}
.hipster-preview #hipster-head .top  {
  width:292px;
  height:292px;
  background-position:-384px -873px;
  transform:  rotateX(90deg) translateZ(147px);
}
.hipster-preview #hipster-head .front {
  width:292px;
  height:202px;
  background-position:-384px -669px;
  transform:translateZ(146px);
}
.hipster-preview #hipster-head .right {
  width:292px;
  height:202px;
  background-position:-92px -669px;
  transform:  rotateY(90deg) translateZ(146px);
}
.hipster-preview #hipster-head .back {
  width:292px;
  height:202px;
  background-position:-967px -669px;
  transform:rotateY(180deg) translateZ(146px);
}
.hipster-preview #hipster-head .left {
  width:292px;
  height:202px;
  background-position:-675px -669px;
  transform:  rotateY(-90deg) translateZ(146px);
}
.hipster-preview #hipster-head .bottom {
  width:292px;
  height:292px;
  background-position:-1040px -580px;
  transform:  rotateX(-90deg) rotate(180deg) translateZ(55px);
}

.hipster-preview #hipster-head .surface ul li {
  display: block;
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:202px;
  background-position:-1038px -368px;
  background-repeat:no-repeat;
}
.hipster-preview #hipster-head .front .hair {
  background-position:-1038px -368px;
}
.hipster-preview #hipster-head .right .hair {
  background-position:-1331px -368px;
}
.hipster-preview #hipster-head .back .hair {
  background-position:-458px -368px;
}
.hipster-preview #hipster-head .left .hair {
  background-position:-748px -368px;
}
.hipster-preview #hipster-head .top .hair {
  height:292px;
  background-position:-1040px -76px;
}

/* body */
.hipster-preview #hipster-body {
  width:189px;
  height:189px;
  margin: 1px auto 0 auto;
  transform:  translateX(52px) translateY(203px);
  z-index:1;
}
.hipster-preview #hipster-body .surface {
  width:189px;
  height:189px;
  z-index:1;
}
.hipster-preview #hipster-body .top  {
  background:transparent;
  transform:  rotateX(90deg) translateZ(95px);
}
.hipster-preview #hipster-body .front {
  background-position:-1062px -100px;
  transform:translateZ(95px);
}
.hipster-preview #hipster-body .right {
  background-position:-1250px -100px;
  transform:  rotateY(90deg) translateZ(95px);
}
.hipster-preview #hipster-body .back {
  background-position:-685px -100px;
  transform:  rotateY(180deg) translateZ(95px);
}
.hipster-preview #hipster-body .left {
  background-position:-873px -100px;
  transform:  rotateY(-90deg) translateZ(95px);
}
.hipster-preview #hipster-body .bottom {
  background-position:-1062px -288px;
  transform:  rotateX(-90deg) rotate(180deg) translateZ(95px);
}

.hipster-preview #hipster-body .shirt {
  height:189px;
}
.hipster-preview #hipster-body .front .shirt {
  background-position: -1058px -102px;
}
.hipster-preview #hipster-body .left .shirt {
  background-position: -873px -102px;
}
.hipster-preview #hipster-body .right .shirt {
  background-position: -1250px -102px;
}
.hipster-preview #hipster-body .back .shirt {
  background-position: -684px -75px;
}
.hipster-preview #hipster-body .bottom .shirt {
  background-position:-800px -75px;
}

.hipster-preview .hipster .surface,
.hipster-preview .hipster.left #hipster-arm-right,
.hipster-preview .hipster.right #hipster-arm-left {
  display: block;
}

/* arms */
.hipster-preview #hipster-arm-left,
.hipster-preview #hipster-arm-right {
  position: absolute;
  width:72px;
  height:136px;
  z-index: 3;
}
.hipster-preview #hipster-arm-left {
  transform: translateX(-22px) translateY(220px) rotateX(45deg);
}
.hipster-preview #hipster-arm-right {
  transform: translateX(243px) translateY(220px) rotateX(45deg);
}
.hipster-preview #hipster-arm-left .surface,
.hipster-preview #hipster-arm-right .surface {
  width:72px;
  height:136px;
  z-index: 1;
}
.hipster-preview #hipster-arm-left .top,
.hipster-preview #hipster-arm-right .top  {
  width:72px;
  height:72px;
  transform:  rotateX(90deg) translateZ(37px);
}
.hipster-preview #hipster-arm-left .top {
  background-position:-132px -92px;
}
.hipster-preview #hipster-arm-right .top {
  background-position:-1507px -872px;
}
.hipster-preview #hipster-arm-left .front,
.hipster-preview #hipster-arm-right .front {
  transform:  translateZ(36px);
}
.hipster-preview #hipster-arm-left .front {
  background-position:-276px -164px;
}
.hipster-preview #hipster-arm-right .front {
  background-position:-1362px -944px;
}
.hipster-preview #hipster-arm-left .right,
.hipster-preview #hipster-arm-right .right {
  transform:  rotateY(90deg) translateZ(36px);
}
.hipster-preview #hipster-arm-right .right {
  background-position:-1435px -944px;
}
.hipster-preview #hipster-arm-left .back,
.hipster-preview #hipster-arm-right .back {
  transform:  rotateY(180deg) translateZ(36px);
}
.hipster-preview #hipster-arm-left .back {
  background-position:-133px -164px;
}
.hipster-preview #hipster-arm-right .back {
  background-position:-1506px -944px;
}
.hipster-preview #hipster-arm-left .left,
.hipster-preview #hipster-arm-right .left {
  transform:  rotateY(-90deg) translateZ(36px);
}
.hipster-preview #hipster-arm-left .left {
  background-position:-204px -164px;
}
.hipster-preview #hipster-arm-left .bottom,
.hipster-preview #hipster-arm-right .bottom {
  width:72px;
  height:72px;
}
.hipster-preview #hipster-arm-left .bottom {
  background-position:-204px -296px;
  transform:  rotateX(-90deg) translateZ(100px) rotate(270deg);
}
.hipster-preview #hipster-arm-right .bottom {
  background-position:-1430px -1077px;
  transform:  rotateX(-90deg) translateZ(100px) rotate(90deg);
}

.hipster-preview #hipster-arm-left .shirt {
  height:136px;
}
.hipster-preview #hipster-arm-left .left .shirt {
  background-position: -204px -162px;
}
.hipster-preview #hipster-arm-left .back .shirt {
  background-position: -132px -162px;
}
.hipster-preview #hipster-arm-left .front .shirt {
  background-position: -276px -162px;
}
.hipster-preview #hipster-arm-left .top .shirt {
  background-position: -132px -91px;
}
.hipster-preview #hipster-arm-left .top .shirt,
.hipster-preview #hipster-arm-left .top .shirt,
.hipster-preview #hipster-arm-right .top .shirt,
.hipster-preview #hipster-arm-right .bottom .shirt {
  height:72px;
}
.hipster-preview #hipster-arm-right .shirt {
  height:136px;
}
.hipster-preview #hipster-arm-right .right .shirt {
  background-position: -1435px -942px;
}
.hipster-preview #hipster-arm-right .back .shirt {
  background-position: -1507px -942px;
}
.hipster-preview #hipster-arm-right .front .shirt {
  background-position: -1363px -942px;
}
.hipster-preview #hipster-arm-right .top .shirt {
  background-position: -1507px -870px;
}


/* feet */
.hipster-preview #hipster-feet {
  width:141px;
  height:72px;
}
.hipster-preview #hipster-feet {
  transform:  translateX(76px) translateY(395px);
  z-index:0;
}
.hipster-preview #hipster-feet .surface {
  width:141px;
  height:72px;
  z-index:0;
  backface-visibility:  visible;
}
.hipster-preview #hipster-feet .top {
  width:141px;
  height:141px;
  background:transparent;
  border:none;
  transform:  rotateX(90deg) translateZ(71px);
}
.hipster-preview #hipster-feet .front {
  transform:  translateZ(71px);
}
.hipster-preview #hipster-feet .right {
  transform:  rotateY(90deg) translateZ(71px);
}
.hipster-preview #hipster-feet .back {
  transform:  rotateY(180deg) translateZ(71px);
}
.hipster-preview #hipster-feet .left {
  transform:  rotateY(-90deg) translateZ(71px);
}
.hipster-preview #hipster-feet .bottom {
  width:141px;
  height:141px;
  background-position:0 0;
  transform:  rotateX(-90deg) rotate(180deg) translateZ(0px);
}
.hipster-preview #hipster-feet .front,
.hipster-preview #hipster-feet .right,
.hipster-preview #hipster-feet .back,
.hipster-preview #hipster-feet .left {
  background-position:-100px -700px;
}
.hipster-preview #hipster-feet .trousers {
  width:141px;
  height:72px;
}
.hipster-preview #hipster-feet .front .trousers {
  background-position: -805px -1586px;
}
.hipster-preview #hipster-feet .back .trousers {
  background-position: -528px -1586px;
}
.hipster-preview #hipster-feet .left .trousers {
  background-position: -662px -1586px;
}
.hipster-preview #hipster-feet .right .trousers {
  background-position: -946px -1586px;
}
.hipster-preview #hipster-feet .front .footwear {
  position: absolute;
  bottom:0;
  width:142px;
  height:33px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: -805px -1624px;
}
.firefox .hipster-preview .surface{
  outline:1px solid transparent
}
            
          
!
            
              // The traqball rotation doesn't seem to work in CodePen's 'edit' mode.
// To give it a spin use this url: http://codepen.io/peterwestendorp/full/Fmtbo

var light,
    faceGroup,
    traqBall = new Traqball({stage: "foldable-traqball", perspective: 1500});

//Photon.js doesn't seem to work in FF
if(/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
  document.body.className += " firefox";
}
else {
  light = new Photon.Light(),
  faceGroup = new Photon.FaceGroup($(".hipster-preview")[0], $('.hipster-preview .surface'), 0.75, 0.15, true);
  
  faceGroup.render(light, true);
  $(window).on('traqBallRotate', function(){
    faceGroup.render(light, true);
  });
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console