Fire JS Bin - Agrrrr

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

$(function() {
    var xyz = {};
    xyz.x = $("input[name=x_axis]").val() || 0;
    xyz.y = $("input[name=y_axis]").val() || 0;
    xyz.z = $("input[name=z_axis]").val() || 0;

$(".perspective").css(
        {
            "-webkit-transform": "rotateX(" + xyz.x + "deg) rotateY(" + xyz.y + "deg) rotateZ(" + xyz.z + "deg)",
            "-moz-transform": "rotateX(" + xyz.x + "deg) rotateY(" + xyz.y + "deg) rotateZ(" + xyz.z + "deg)",
            "transform": "rotateX(" + xyz.x + "deg) rotateY(" + xyz.y + "deg) rotateZ(" + xyz.z + "deg)"
        }
    );

$("input[type=range]").on("change", function() {
        if ($(this).attr("name") == "x_axis") {
            xyz.x = $(this).val();
        }
        else if ($(this).attr("name") == "y_axis") {
            xyz.y = $(this).val();
        }
        else if ($(this).attr("name") == "z_axis") {
            xyz.z = $(this).val();
        }

$(".perspective").css(
            {
                "-webkit-transform": "rotateX(" + xyz.x + "deg) rotateY(" + xyz.y + "deg) rotateZ(" + xyz.z + "deg)",
                "-moz-transform": "rotateX(" + xyz.x + "deg) rotateY(" + xyz.y + "deg) rotateZ(" + xyz.z + "deg)",
                "transform": "rotateX(" + xyz.x + "deg) rotateY(" + xyz.y + "deg) rotateZ(" + xyz.z + "deg)"
            }
        );

});

var mvar = 0.01;
    var offset = 10;

$("body").bind("mousemove touchstart", function(e) {
        var cx = $(document).width() * 0.5;
        var cy = $(document).height() * 0.5;

var ex = e.pageX || e.originalEvent.touches[0].pageX;
        var ey = e.pageY || e.originalEvent.touches[0].pageY;

var xx = ((cy - ey) / cy) * 55;
        var yy = ((cx - ex) / cx) * (-50);
        $(".perspective").css(
            {
                "-webkit-transform": "rotateX(" + xx + "deg) rotateY(" + yy + "deg) rotateZ(" + xyz.z + "deg)",
                "-moz-transform": "rotateX(" + xx + "deg) rotateY(" + yy + "deg) rotateZ(" + xyz.z + "deg)",
                "transform": "rotateX(" + xx + "deg) rotateY(" + yy + "deg) rotateZ(" + xyz.z + "deg)"
            }
        );
    });
});

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">

<title>Agrrr! Here is a mighty 3D domo in CSS3</title>
    <meta name="description" content="CSS3 experiment with webkit-perspective & 3D transform">
    <meta name="author" content="Rafal Bromirski">

</head>
<body>

<div class="leg right">
                    <div class="front"></div>
                    <div class="left"></div>
                    <div class="right"></div>
                    <div class="back"></div>
                    <div class="bottom"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="description">
        <div class="error">Sorry but your browser doesn't support CSS3 transform 3D :(</div>
        <h1>Agrrrr!!!</h1>
        <p>His name is <a href="http://en.wikipedia.org/wiki/Domo_(NHK)">DOMO</a>. I've made this experiment during my last research about using 3D & CSS3 in web browsers. It works on Google Chrome (v.16 & up), Firefox (v.10 & up) & Safari (including mobile version for iOS).</p>
        <p><strong>Note: </strong>Move your mouse (or tap anywhere if you're using iOS) to change perspective angle. This code is available on <a href="http://github.com/paranoida/3D-Domo-in-CSS3">github</a> so if you want to create army of little Domos - do so but remember about me.</p>
    </div>
</div>

</body>
</html>

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

html, body {
  height: 100%;
}

body {
  font: 12px Helvetica, Arial, sans-serif;
  background: url(http://demos.paranoida.com/domo/images/bg-pattern.png) repeat 0 0 #f9f8f4;
  color: #8e8c86;
}

.content {
  min-height: 100%;
  /*
  .plane
  {
      width: 100em;
      height: 100em;
      -webkit-transform: rotateX(-90deg);
      margin: 0 auto;
      background: rgba(255,255,255,.2);
      border: 2px solid #000;
      background-size: 8px;
      display: none;
  }
  */
}
.content .controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  display: none;
}
.content .controls input {
  display: block;
  margin-bottom: 10px;
}
.content .domo_thumb {
  margin: 0 auto;
  display: none;
  text-align: center;
}
.no-csstransforms3d .content .domo_thumb {
  display: block;
}
.content .viewport {
  width: 750px;
  height: 500px;
  margin: 0 auto;
  -webkit-perspective: 1200;
  -webkit-perspective-origin: 50% 10%;
  -moz-perspective: 1200px;
  -moz-perspective-origin: 50% 10%;
  perspective: 1200;
  perspective-origin: 50% 10%;
}
.content .viewport .perspective {
  height: inherit;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.touch .content .viewport .perspective {
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.no-csstransforms3d .content .viewport {
  display: none;
}
.content .description {
  width: 450px;
  position: relative;
  margin: 50px auto;
  padding: 20px;
  background: #fff;
  border: 1px solid;
  border-color: #d1d0cd;
  border-color: rgba(0, 0, 0, 0.15);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 1px 0 white;
  -webkit-box-shadow: 0 1px 0 white;
  -o-box-shadow: 0 1px 0 white;
  box-shadow: 0 1px 0 white;
}
.content .description:before {
  content: '';
  position: absolute;
  left: 50%;
  top: -12px;
  margin-left: -10px;
  display: block;
  width: 20px;
  height: 12px;
  background: url(http://demos.paranoida.com/domo/images/tip.png) no-repeat 0 0 transparent;
}
.content .description .error {
  background: #d42f1b;
  color: #fff;
  padding: 8px 10px;
  font-weight: bold;
  margin-bottom: 10px;
  display: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}
.no-csstransforms3d .content .description .error {
  display: block;
}
.content .social-medias {
  padding-top: 10px;
}
.content .social-medias li {
  display: inline-block;
  vertical-align: top;
}
.content .social-medias li:first-child {
  padding-right: 15px;
}

.domo {
  display: block;
  width: 18em;
  height: 26em;
  position: relative;
  top: 50%;
  margin: -13em auto 0;
  font-size: 8px;
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: right bottom;
  /*-webkit-animation: walk 1s infinite linear;*/
  -moz-transform-style: preserve-3d;
  -moz-transform-origin: right bottom;
  transform-style: preserve-3d;
  transform-origin: right bottom;
}
.domo .body {
  width: 18em;
  height: 21em;
  -moz-transform-style: preserve-3d;
}
.domo .body .front, .domo .body .back {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
}
.domo .body .front {
  background: url(http://demos.paranoida.com/domo/images/domo_pattern_front.jpg) repeat 0 0 #79391a;
}
.domo .body .back {
  background: url(http://demos.paranoida.com/domo/images/domo_pattern_back.jpg) repeat 0 0 #79391a;
  -webkit-transform: translateZ(-8em);
  -moz-transform: translateZ(-8em);
  transform: translateZ(-8em);
}
.domo .body .left {
  position: absolute;
  top: 0;
  left: 0;
  width: 8em;
  height: inherit;
  background: url(http://demos.paranoida.com/domo/images/domo_pattern_rear.jpg) repeat 0 0 #79391a;
  -webkit-transform-origin: left bottom;
  -webkit-transform: rotateY(90deg);
  -moz-transform-origin: left bottom;
  -moz-transform: rotateY(90deg);
  transform-origin: left bottom;
  transform: rotateY(90deg);
}
.domo .body .right {
  position: absolute;
  top: 0;
  right: 0;
  width: 8em;
  height: inherit;
  background: url(http://demos.paranoida.com/domo/images/domo_pattern_rear.jpg) repeat 0 0 #79391a;
  -webkit-transform-origin: right bottom;
  -webkit-transform: rotateY(-90deg);
  -moz-transform-origin: right bottom;
  -moz-transform: rotateY(-90deg);
  transform-origin: right bottom;
  transform: rotateY(-90deg);
}
.domo .body .top {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: 8em;
  background: url(http://demos.paranoida.com/domo/images/domo_pattern_top.jpg) repeat 0 0;
  -webkit-transform-origin: top left;
  -webkit-transform: rotateX(-90deg);
  -moz-transform-origin: top left;
  -moz-transform: rotateX(-90deg);
  transform-origin: top left;
  transform: rotateX(-90deg);
}
.domo .body .bottom {
  position: absolute;
  top: 21em;
  left: 0;
  width: inherit;
  height: 8em;
  background: url(http://demos.paranoida.com/domo/images/domo_pattern_bottom.jpg) repeat 0 0;
  -webkit-transform-origin: left top;
  -webkit-transform: rotateX(-90deg);
  -moz-transform-origin: left top;
  -moz-transform: rotateX(-90deg);
  transform-origin: left top;
  transform: rotateX(-90deg);
}
.domo .body {
  position: relative;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translateZ(5em);
  -moz-transform-style: preserve-3d;
  -moz-transform: translateZ(5em);
  transform-style: preserve-3d;
  transform: translateZ(5em);
}
.domo .body .front {
  background: url(http://demos.paranoida.com/domo/images/domo.jpg) no-repeat 0 0, url(http://demos.paranoida.com/domo/images/domo_pattern_front.jpg) repeat 0 0 #79391a;
  background-size: 100%, auto;
}
.domo .leg {
  width: 7em;
  height: 5em;
  -moz-transform-style: preserve-3d;
}
.domo .leg .front, .domo .leg .back {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
}
.domo .leg .front {
  background: url(http://demos.paranoida.com/domo/images/domo_pattern_front.jpg) repeat 0 0 #79391a;
}
.domo .leg .back {
  background: url(http://demos.paranoida.com/domo/images/domo_pattern_back.jpg) repeat 0 0 #79391a;
  -webkit-transform: translateZ(-8em);
  -moz-transform: translateZ(-8em);
  transform: translateZ(-8em);
}
.domo .leg .left {
  position: absolute;
  top: 0;
  left: 0;
  width: 8em;
  height: inherit;
  background: url(http://demos.paranoida.com/domo/images/domo_pattern_rear.jpg) repeat 0 0 #79391a;
  -webkit-transform-origin: left bottom;
  -webkit-transform: rotateY(90deg);
  -moz-transform-origin: left bottom;
  -moz-transform: rotateY(90deg);
  transform-origin: left bottom;
  transform: rotateY(90deg);
}
.domo .leg .right {
  position: absolute;
  top: 0;
  right: 0;
  width: 8em;
  height: inherit;
  background: url(http://demos.paranoida.com/domo/images/domo_pattern_rear.jpg) repeat 0 0 #79391a;
  -webkit-transform-origin: right bottom;
  -webkit-transform: rotateY(-90deg);
  -moz-transform-origin: right bottom;
  -moz-transform: rotateY(-90deg);
  transform-origin: right bottom;
  transform: rotateY(-90deg);
}
.domo .leg .top {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: 8em;
  background: url(http://demos.paranoida.com/domo/images/domo_pattern_top.jpg) repeat 0 0;
  -webkit-transform-origin: top left;
  -webkit-transform: rotateX(-90deg);
  -moz-transform-origin: top left;
  -moz-transform: rotateX(-90deg);
  transform-origin: top left;
  transform: rotateX(-90deg);
}
.domo .leg .bottom {
  position: absolute;
  top: 5em;
  left: 0;
  width: inherit;
  height: 8em;
  background: url(http://demos.paranoida.com/domo/images/domo_pattern_bottom.jpg) repeat 0 0;
  -webkit-transform-origin: left top;
  -webkit-transform: rotateX(-90deg);
  -moz-transform-origin: left top;
  -moz-transform: rotateX(-90deg);
  transform-origin: left top;
  transform: rotateX(-90deg);
}
.domo .leg {
  position: absolute;
  top: 21em;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translateZ(5em);
  -moz-transform-style: preserve-3d;
  -moz-transform: translateZ(5em);
  transform-style: preserve-3d;
  transform: translateZ(5em);
}
.domo .leg.left {
  left: 0;
}
.domo .leg.right {
  right: 0;
}
.domo .arm {
  width: 4.5em;
  height: 11.5em;
  -moz-transform-style: preserve-3d;
}
.domo .arm .front, .domo .arm .back {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
}
.domo .arm .front {
  background: url(http://demos.paranoida.com/domo/images/domo_pattern_front.jpg) repeat 0 0 #79391a;
}
.domo .arm .back {
  background: url(http://demos.paranoida.com/domo/images/domo_pattern_back.jpg) repeat 0 0 #79391a;
  -webkit-transform: translateZ(-4.5em);
  -moz-transform: translateZ(-4.5em);
  transform: translateZ(-4.5em);
}
.domo .arm .left {
  position: absolute;
  top: 0;
  left: 0;
  width: 4.5em;
  height: inherit;
  background: url(http://demos.paranoida.com/domo/images/domo_pattern_rear.jpg) repeat 0 0 #79391a;
  -webkit-transform-origin: left bottom;
  -webkit-transform: rotateY(90deg);
  -moz-transform-origin: left bottom;
  -moz-transform: rotateY(90deg);
  transform-origin: left bottom;
  transform: rotateY(90deg);
}
.domo .arm .right {
  position: absolute;
  top: 0;
  right: 0;
  width: 4.5em;
  height: inherit;
  background: url(http://demos.paranoida.com/domo/images/domo_pattern_rear.jpg) repeat 0 0 #79391a;
  -webkit-transform-origin: right bottom;
  -webkit-transform: rotateY(-90deg);
  -moz-transform-origin: right bottom;
  -moz-transform: rotateY(-90deg);
  transform-origin: right bottom;
  transform: rotateY(-90deg);
}
.domo .arm .top {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: 4.5em;
  background: url(http://demos.paranoida.com/domo/images/domo_pattern_top.jpg) repeat 0 0;
  -webkit-transform-origin: top left;
  -webkit-transform: rotateX(-90deg);
  -moz-transform-origin: top left;
  -moz-transform: rotateX(-90deg);
  transform-origin: top left;
  transform: rotateX(-90deg);
}
.domo .arm .bottom {
  position: absolute;
  top: 11.5em;
  left: 0;
  width: inherit;
  height: 4.5em;
  background: url(http://demos.paranoida.com/domo/images/domo_pattern_bottom.jpg) repeat 0 0;
  -webkit-transform-origin: left top;
  -webkit-transform: rotateX(-90deg);
  -moz-transform-origin: left top;
  -moz-transform: rotateX(-90deg);
  transform-origin: left top;
  transform: rotateX(-90deg);
}
.domo .arm {
  position: absolute;
  top: 7em;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.domo .arm.left {
  right: -4.5em;
  -webkit-transform: rotateX(110deg);
  -webkit-transform-origin: left top;
  -webkit-animation: left-hand 1.3s infinite ease-in-out;
  -moz-transform: rotateX(110deg);
  -moz-transform-origin: left top;
  -moz-animation: left-hand 1.3s infinite ease-in-out;
  transform: rotateX(110deg);
  transform-origin: left top;
  animation: left-hand 1.3s infinite ease-in-out;
}
.domo .arm.right {
  left: -4.5em;
  -webkit-transform: rotateX(60deg);
  -webkit-transform-origin: right top;
  -webkit-animation: right-hand 1.3s infinite ease-in-out;
  -moz-transform: rotateX(60deg);
  -moz-transform-origin: right top;
  -moz-animation: right-hand 1.3s infinite ease-in-out;
  transform: rotateX(60deg);
  transform-origin: right top;
  animation: right-hand 1.3s infinite ease-in-out;
}

@-webkit-keyframes right-hand {
  0%, 100% {
    -webkit-transform: rotateX(60deg);
  }

50% {
    -webkit-transform: rotateX(110deg);
  }
}

@-moz-keyframes right-hand {
  0%, 100% {
    -moz-transform: rotateX(60deg);
  }

50% {
    -moz-transform: rotateX(110deg);
  }
}

@keyframes right-hand {
  0%, 100% {
    transform: rotateX(60deg);
  }

50% {
    transform: rotateX(110deg);
  }
}

@-webkit-keyframes left-hand {
  0%, 100% {
    -webkit-transform: rotateX(110deg);
  }

50% {
    -webkit-transform: rotateX(60deg);
  }
}

@-moz-keyframes left-hand {
  0%, 100% {
    -moz-transform: rotateX(110deg);
  }

50% {
    -moz-transform: rotateX(60deg);
  }
}

@keyframes left-hand {
  0%, 100% {
    transform: rotateX(110deg);
  }

50% {
    transform: rotateX(60deg);
  }
}

@-webkit-keyframes walk {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotateZ(0);
  }

25% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotateZ(5deg);
  }

50% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotateZ(0);
  }

50.5% {
    -webkit-transform-origin: left bottom;
  }

75% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotateZ(-5deg);
  }

100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotateZ(0);
  }
}

h1 {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  padding-bottom: 15px;
}

p {
  color: #74726d;
  line-height: 18px;
  padding: 5px 0;
}

strong {
  font-weight: bold;
}

a {
  color: #008aff;
  font-weight: bold;
  display: inline-block;
  text-decoration: none;
  padding: 0px 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
  -moz-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
a:hover {
  background: #008aff;
  color: #fff;
}

@media screen and (max-width: 750px) {
  /* to avoid the adjustment of fonts on iOS devices you should keep this line */
  * {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
  }

.content .viewport {
    width: 640px;
    height: 350px;
  }

.domo {
    font-size: 6px;
  }
}
@media screen and (max-width: 640px) {
  .content .viewport {
    width: 470px;
  }
  .content .description {
    width: 400px;
  }
}
@media screen and (max-width: 480px) {
  .content .viewport {
    width: 400px;
  }
  .content .description {
    width: 310px;
  }
}
@media screen and (max-width: 320px) {
  .content .viewport, .content .description {
    width: 260px;
  }
}

Pop out