CodePen Embed - TMNT in 3D


<div id="figure" data-type="leonardo">
  <div class="head">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="body">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="arm right">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="arm left">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="legs">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<div id="nav">
  <a href="#" class="active" data-type="leonardo">Leonardo</a>
  <a href="#" data-type="donatello">Donatello</a>
  <a href="#" data-type="michelangelo">Michelangelo</a>
  <a href="#" data-type="raphael">Raphael</a>
</div>

html {
  height: 100%;
  font-family: Arial, sans-serif;
  background-color: #efefef;
  background-image: -webkit-gradient(radial, center center, 0, center center, 460, color-stop(0%, #efefef), color-stop(300%, black));
  background-image: -webkit-radial-gradient(50% 50%, circle, #efefef 0%, black 300%);
  background-image: radial-gradient(  circle at 50% 50%, #efefef 0%, black 300%); }

#figure {
  padding: 0 25%;
  height: 200px;
  -webkit-perspective: 2000px;
  -moz-perspective: 2000px;
  perspective: 2000px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation: rotate 2s infinite alternate ease-in-out;
  -moz-animation: rotate 2s infinite alternate ease-in-out;
  animation: rotate 2s infinite alternate ease-in-out;
  position: relative;
  top: 100px; }
  #figure[data-type="leonardo"] > div > div {
    background-image: url(http://cdn.cubeecraft.com/downloads/character330.jpg); }
  #figure[data-type="donatello"] > div > div {
    background-image: url(http://cdn.cubeecraft.com/downloads/character332.jpg); }
  #figure[data-type="michelangelo"] > div > div {
    background-image: url(http://cdn.cubeecraft.com/downloads/character333.jpg); }
  #figure[data-type="raphael"] > div > div {
    background-image: url(http://cdn.cubeecraft.com/downloads/character331.jpg); }

.head, .body, .arm, .legs {
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d; }
  .head > div, .body > div, .arm > div, .legs > div {
    position: absolute;
    background-repeat: no-repeat; }

.head > div {
  width: 300px; }
.head > div:nth-child(1) {
  height: 210px;
  background-position: -820px -372px;
  -webkit-transform: translateZ(150px);
  -moz-transform: translateZ(150px);
  -ms-transform: translateZ(150px);
  -o-transform: translateZ(150px);
  transform: translateZ(150px); }
.head > div:nth-child(2) {
  height: 210px;
  background-position: -1123px -372px;
  -webkit-transform: rotateY(90deg) translateZ(150px);
  -moz-transform: rotateY(90deg) translateZ(150px);
  -ms-transform: rotateY(90deg) translateZ(150px);
  -o-transform: rotateY(90deg) translateZ(150px);
  transform: rotateY(90deg) translateZ(150px); }
.head > div:nth-child(3) {
  height: 210px;
  background-position: -517px -372px;
  -webkit-transform: rotateY(-90deg) translateZ(150px);
  -moz-transform: rotateY(-90deg) translateZ(150px);
  -ms-transform: rotateY(-90deg) translateZ(150px);
  -o-transform: rotateY(-90deg) translateZ(150px);
  transform: rotateY(-90deg) translateZ(150px); }
.head > div:nth-child(4) {
  height: 210px;
  background-position: -214px -372px;
  -webkit-transform: rotateY(180deg) translateZ(150px);
  -moz-transform: rotateY(180deg) translateZ(150px);
  -ms-transform: rotateY(180deg) translateZ(150px);
  -o-transform: rotateY(180deg) translateZ(150px);
  transform: rotateY(180deg) translateZ(150px); }
.head > div:nth-child(5) {
  height: 300px;
  background-position: -820px -585px;
  -webkit-transform: rotatex(-90deg) translateZ(60px);
  -moz-transform: rotatex(-90deg) translateZ(60px);
  -ms-transform: rotatex(-90deg) translateZ(60px);
  -o-transform: rotatex(-90deg) translateZ(60px);
  transform: rotatex(-90deg) translateZ(60px); }
.head > div:nth-child(6) {
  height: 300px;
  background-position: -820px -69px;
  -webkit-transform: rotatex(90deg) translateZ(150px);
  -moz-transform: rotatex(90deg) translateZ(150px);
  -ms-transform: rotatex(90deg) translateZ(150px);
  -o-transform: rotatex(90deg) translateZ(150px);
  transform: rotatex(90deg) translateZ(150px); }

.body {
  top: 210px;
  left: 53px; }
  .body > div {
    width: 194px;
    height: 193px; }
  .body > div:nth-child(1) {
    background-position: -260px -920px;
    -webkit-transform: translateZ(97px) rotate(180deg);
    -moz-transform: translateZ(97px) rotate(180deg);
    -ms-transform: translateZ(97px) rotate(180deg);
    -o-transform: translateZ(97px) rotate(180deg);
    transform: translateZ(97px) rotate(180deg); }
  .body > div:nth-child(2) {
    background-position: -454px -920px;
    -webkit-transform: rotateY(-90deg) rotateZ(180deg) rotateX(0deg) translateZ(-97px);
    -moz-transform: rotateY(-90deg) rotateZ(180deg) rotateX(0deg) translateZ(-97px);
    -ms-transform: rotateY(-90deg) rotateZ(180deg) rotateX(0deg) translateZ(-97px);
    -o-transform: rotateY(-90deg) rotateZ(180deg) rotateX(0deg) translateZ(-97px);
    transform: rotateY(-90deg) rotateZ(180deg) rotateX(0deg) translateZ(-97px); }
  .body > div:nth-child(3) {
    background-position: -65px -920px;
    -webkit-transform: rotateY(90deg) rotateZ(180deg) translateZ(-97px);
    -moz-transform: rotateY(90deg) rotateZ(180deg) translateZ(-97px);
    -ms-transform: rotateY(90deg) rotateZ(180deg) translateZ(-97px);
    -o-transform: rotateY(90deg) rotateZ(180deg) translateZ(-97px);
    transform: rotateY(90deg) rotateZ(180deg) translateZ(-97px); }
  .body > div:nth-child(4) {
    background-position: -649px -920px;
    -webkit-transform: rotateY(180deg) rotateX(180deg) translateZ(-97px);
    -moz-transform: rotateY(180deg) rotateX(180deg) translateZ(-97px);
    -ms-transform: rotateY(180deg) rotateX(180deg) translateZ(-97px);
    -o-transform: rotateY(180deg) rotateX(180deg) translateZ(-97px);
    transform: rotateY(180deg) rotateX(180deg) translateZ(-97px); }
  .body > div:nth-child(5) {
    height: 194px;
    background-position: -260px -724px;
    -webkit-transform: rotatex(90deg) translateZ(-97px);
    -moz-transform: rotatex(90deg) translateZ(-97px);
    -ms-transform: rotatex(90deg) translateZ(-97px);
    -o-transform: rotatex(90deg) translateZ(-97px);
    transform: rotatex(90deg) translateZ(-97px); }

.arm {
  top: 272px; }
  .arm.right {
    -webkit-transform: rotateX(45deg) translateY(-40px) translateX(-20px);
    -moz-transform: rotateX(45deg) translateY(-40px) translateX(-20px);
    -ms-transform: rotateX(45deg) translateY(-40px) translateX(-20px);
    -o-transform: rotateX(45deg) translateY(-40px) translateX(-20px);
    transform: rotateX(45deg) translateY(-40px) translateX(-20px); }
  .arm.left {
    -webkit-transform: rotateX(45deg) translateY(-40px) translateX(247px);
    -moz-transform: rotateX(45deg) translateY(-40px) translateX(247px);
    -ms-transform: rotateX(45deg) translateY(-40px) translateX(247px);
    -o-transform: rotateX(45deg) translateY(-40px) translateX(247px);
    transform: rotateX(45deg) translateY(-40px) translateX(247px); }
  .arm > div {
    width: 73px; }
  .arm > div:nth-child(1) {
    height: 138px;
    background-position: -244px -112px;
    -webkit-transform: translateZ(36px);
    -moz-transform: translateZ(36px);
    -ms-transform: translateZ(36px);
    -o-transform: translateZ(36px);
    transform: translateZ(36px); }
  .arm > div:nth-child(2) {
    height: 138px;
    background-position: -169px -112px;
    -webkit-transform: rotateY(-90deg) translateZ(36px);
    -moz-transform: rotateY(-90deg) translateZ(36px);
    -ms-transform: rotateY(-90deg) translateZ(36px);
    -o-transform: rotateY(-90deg) translateZ(36px);
    transform: rotateY(-90deg) translateZ(36px); }
  .arm.left > div:nth-child(2) {
    -webkit-transform: rotateY(-90deg) translateZ(-36px);
    -moz-transform: rotateY(-90deg) translateZ(-36px);
    -ms-transform: rotateY(-90deg) translateZ(-36px);
    -o-transform: rotateY(-90deg) translateZ(-36px);
    transform: rotateY(-90deg) translateZ(-36px); }
  .arm > div:nth-child(3) {
    height: 138px;
    background-position: -95px -112px;
    -webkit-transform: translateZ(-36px);
    -moz-transform: translateZ(-36px);
    -ms-transform: translateZ(-36px);
    -o-transform: translateZ(-36px);
    transform: translateZ(-36px); }
  .arm > div:nth-child(4) {
    height: 76px;
    background-position: -169px -251px;
    -webkit-transform: rotatex(-90deg) translateZ(100px);
    -moz-transform: rotatex(-90deg) translateZ(100px);
    -ms-transform: rotatex(-90deg) translateZ(100px);
    -o-transform: rotatex(-90deg) translateZ(100px);
    transform: rotatex(-90deg) translateZ(100px); }
  .arm > div:nth-child(5) {
    height: 76px;
    background-position: -244px -37px;
    -webkit-transform: rotatex(-90deg) translateZ(-38px);
    -moz-transform: rotatex(-90deg) translateZ(-38px);
    -ms-transform: rotatex(-90deg) translateZ(-38px);
    -o-transform: rotatex(-90deg) translateZ(-38px);
    transform: rotatex(-90deg) translateZ(-38px); }

.legs {
  top: 461px;
  -webkit-transform: rotate(-90deg) translateY(79px) translateZ(0px);
  -moz-transform: rotate(-90deg) translateY(79px) translateZ(0px);
  -ms-transform: rotate(-90deg) translateY(79px) translateZ(0px);
  -o-transform: rotate(-90deg) translateY(79px) translateZ(0px);
  transform: rotate(-90deg) translateY(79px) translateZ(0px);
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top; }
  .legs > div {
    width: 73px; }
  .legs > div:nth-child(1) {
    height: 144px;
    background-position: -8px -574px;
    -webkit-transform: translateZ(72px);
    -moz-transform: translateZ(72px);
    -ms-transform: translateZ(72px);
    -o-transform: translateZ(72px);
    transform: translateZ(72px); }
  .legs > div:nth-child(2) {
    height: 144px;
    background-position: -8px -428px;
    -webkit-transform: rotateX(90deg) translateZ(72px);
    -moz-transform: rotateX(90deg) translateZ(72px);
    -ms-transform: rotateX(90deg) translateZ(72px);
    -o-transform: rotateX(90deg) translateZ(72px);
    transform: rotateX(90deg) translateZ(72px); }
  .legs > div:nth-child(3) {
    height: 144px;
    background-position: -8px -282px;
    -webkit-transform: translateZ(-72px);
    -moz-transform: translateZ(-72px);
    -ms-transform: translateZ(-72px);
    -o-transform: translateZ(-72px);
    transform: translateZ(-72px); }
  .legs > div:nth-child(4) {
    height: 144px;
    background-position: -8px -720px;
    -webkit-transform: rotateX(-90deg) translateZ(72px);
    -moz-transform: rotateX(-90deg) translateZ(72px);
    -ms-transform: rotateX(-90deg) translateZ(72px);
    -o-transform: rotateX(-90deg) translateZ(72px);
    transform: rotateX(-90deg) translateZ(72px); }

#nav {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 120px; }
  #nav > a {
    display: block;
    padding-bottom: 90px;
    margin-bottom: 10px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 2px solid crimson;
    background-position: center -5px;
    background-repeat: no-repeat;
    background-color: #fff;
    background-size: contain;
    text-decoration: none;
    color: crimson; }
    #nav > a:hover, #nav > a.active {
      border-color: limegreen; }
    #nav > a[data-type="leonardo"] {
      background-image: url(http://cdn.cubeecraft.com/images/330a.png); }
    #nav > a[data-type="donatello"] {
      background-image: url(http://cdn.cubeecraft.com/images/332a.png); }
    #nav > a[data-type="michelangelo"] {
      background-image: url(http://cdn.cubeecraft.com/images/333a.png); }
    #nav > a[data-type="raphael"] {
      background-image: url(http://cdn.cubeecraft.com/images/331a.png); }

@-webkit-keyframes rotate {
  from {
    -webkit-transform: scale(0.5) rotateY(40deg) rotateX(3deg) rotateZ(3deg); }

  to {
    -webkit-transform: scale(0.5) rotateY(400deg) rotateX(3deg) rotateZ(3deg); } }

@keyframes rotate {
  from {
    transform: scale(0.5) rotateY(40deg) rotateX(3deg) rotateZ(3deg); }

  to {
    transform: scale(0.5) rotateY(400deg) rotateX(3deg) rotateZ(3deg); } }

(function() {

	var figure   = document.getElementById('figure');
	var navItems = document.querySelectorAll('#nav a');
	navItemsArr  = ([].slice.call(navItems, 0));

	nav.addEventListener('mouseover', addType, false);
	nav.addEventListener('mouseout', removeType, false);
	nav.addEventListener('click', addType, false);
	nav.addEventListener('click', changeActive, false);

	function addType(ev) {
		ev.preventDefault();
		if(ev.target === nav) return;

		var type = ev.target.getAttribute('data-type');
		figure.setAttribute('data-type', type);

	}

	function changeActive(ev) {
		// toggle active state
		navItemsArr.forEach(function(item) {
			item.classList.remove('active');
		});
		ev.target.classList.add('active');
	}

	function removeType(ev) {

		navItemsArr.forEach(function(item) {
			if(item.classList.contains('active')) {
				figure.setAttribute('data-type', item.getAttribute('data-type'));
			}
		});
		

	}

})();

This Pen is owned by Jannick Garthen on CodePen.

See more by @garthenweb on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.