<!-- --- @start control section-->
<div class="controls">
  <!-- --- @start button-wrapper-->
  <div class="button-wrapper">
    <div>
      <button type="button" data-theme="flat" class="themer selected">扁平效果  </button>
      <button type="button" data-theme="realistic" class="themer">立体效果  </button>
      <button type="button" class="scrambler">打乱魔方</button>
    </div>
  </div>
</div>
<h1>HTML5魔方</h1>
<h2>用鼠标拖拽页面任何地方，可以让魔方旋转</h2>
<h2>拖拽魔方上的方块，可以自由拧转魔方</h2>
<h3><b>请注意:</b>魔方的中间一层是无法转动的，就跟你玩真实的魔方一样。</h3>
<!-- --- @start canvas-->
<div class="canvas theme-flat">
  <div class="cube-wrapper">
    <div class="cube">
      <div data-x="y" data-y="x" data-control="top" class="swiper top"></div>
      <div data-x="y" data-y="x" data-control="bottom" class="swiper bottom"></div>
      <div data-x="y" data-y="z" data-control="left" class="swiper left"></div>
      <div data-x="y" data-y="z" data-control="right" class="swiper right"></div>
      <div data-x="z" data-y="x" data-control="front" class="swiper front"></div>
      <div data-x="z" data-y="x" data-control="back" class="swiper back"></div>
      <!-- --- @start grip-->
      <div class="grip">
        <div class="axis axis-grip"></div>
      </div>
      <!-- --- @start parts-->
      <div data-x="0" data-y="0" data-z="0" class="cube-part-wrapper cube-part-wrapper-000">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top">
              <div class="sticker"></div>
            </li>
            <li class="side bottom yellow">
              <div class="sticker"></div>
            </li>
            <li class="side right">
              <div class="sticker"></div>
            </li>
            <li class="side left red">
              <div class="sticker"></div>
            </li>
            <li class="side back">
              <div class="sticker"></div>
            </li>
            <li class="side front blue">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="0" data-y="0" data-z="1" class="cube-part-wrapper cube-part-wrapper-001">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top">
              <div class="sticker"></div>
            </li>
            <li class="side bottom">
              <div class="sticker"></div>
            </li>
            <li class="side right">
              <div class="sticker"></div>
            </li>
            <li class="side left red">
              <div class="sticker"></div>
            </li>
            <li class="side back">
              <div class="sticker"></div>
            </li>
            <li class="side front blue">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="0" data-y="0" data-z="2" class="cube-part-wrapper cube-part-wrapper-002">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top white">
              <div class="sticker"></div>
            </li>
            <li class="side bottom">
              <div class="sticker"></div>
            </li>
            <li class="side right">
              <div class="sticker"></div>
            </li>
            <li class="side left red">
              <div class="sticker"></div>
            </li>
            <li class="side back">
              <div class="sticker"></div>
            </li>
            <li class="side front blue">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="0" data-y="1" data-z="0" class="cube-part-wrapper cube-part-wrapper-010">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top">
              <div class="sticker"></div>
            </li>
            <li class="side bottom yellow">
              <div class="sticker"></div>
            </li>
            <li class="side right">
              <div class="sticker"></div>
            </li>
            <li class="side left">
              <div class="sticker"></div>
            </li>
            <li class="side back">
              <div class="sticker"></div>
            </li>
            <li class="side front blue">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="0" data-y="1" data-z="1" class="cube-part-wrapper cube-part-wrapper-011">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top">
              <div class="sticker"></div>
            </li>
            <li class="side bottom">
              <div class="sticker"></div>
            </li>
            <li class="side right">
              <div class="sticker"></div>
            </li>
            <li class="side left">
              <div class="sticker"></div>
            </li>
            <li class="side back">
              <div class="sticker"></div>
            </li>
            <li class="side front blue">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="0" data-y="1" data-z="2" class="cube-part-wrapper cube-part-wrapper-012">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top white">
              <div class="sticker"></div>
            </li>
            <li class="side bottom">
              <div class="sticker"></div>
            </li>
            <li class="side right">
              <div class="sticker"></div>
            </li>
            <li class="side left">
              <div class="sticker"></div>
            </li>
            <li class="side back">
              <div class="sticker"></div>
            </li>
            <li class="side front blue">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="0" data-y="2" data-z="0" class="cube-part-wrapper cube-part-wrapper-020">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top">
              <div class="sticker"></div>
            </li>
            <li class="side bottom yellow">
              <div class="sticker"></div>
            </li>
            <li class="side right orange">
              <div class="sticker"></div>
            </li>
            <li class="side left">
              <div class="sticker"></div>
            </li>
            <li class="side back">
              <div class="sticker"></div>
            </li>
            <li class="side front blue">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="0" data-y="2" data-z="1" class="cube-part-wrapper cube-part-wrapper-021">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top">
              <div class="sticker"></div>
            </li>
            <li class="side bottom">
              <div class="sticker"></div>
            </li>
            <li class="side right orange">
              <div class="sticker"></div>
            </li>
            <li class="side left">
              <div class="sticker"></div>
            </li>
            <li class="side back">
              <div class="sticker"></div>
            </li>
            <li class="side front blue">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="0" data-y="2" data-z="2" class="cube-part-wrapper cube-part-wrapper-022">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top white">
              <div class="sticker"></div>
            </li>
            <li class="side bottom">
              <div class="sticker"></div>
            </li>
            <li class="side right orange">
              <div class="sticker"></div>
            </li>
            <li class="side left">
              <div class="sticker"></div>
            </li>
            <li class="side back">
              <div class="sticker"></div>
            </li>
            <li class="side front blue">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="1" data-y="0" data-z="0" class="cube-part-wrapper cube-part-wrapper-100">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top">
              <div class="sticker"></div>
            </li>
            <li class="side bottom yellow">
              <div class="sticker"></div>
            </li>
            <li class="side right">
              <div class="sticker"></div>
            </li>
            <li class="side left red">
              <div class="sticker"></div>
            </li>
            <li class="side back">
              <div class="sticker"></div>
            </li>
            <li class="side front">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="1" data-y="0" data-z="1" class="cube-part-wrapper cube-part-wrapper-101">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top">
              <div class="sticker"></div>
            </li>
            <li class="side bottom">
              <div class="sticker"></div>
            </li>
            <li class="side right">
              <div class="sticker"></div>
            </li>
            <li class="side left red">
              <div class="sticker"></div>
            </li>
            <li class="side back">
              <div class="sticker"></div>
            </li>
            <li class="side front">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="1" data-y="0" data-z="2" class="cube-part-wrapper cube-part-wrapper-102">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top white">
              <div class="sticker"></div>
            </li>
            <li class="side bottom">
              <div class="sticker"></div>
            </li>
            <li class="side right">
              <div class="sticker"></div>
            </li>
            <li class="side left red">
              <div class="sticker"></div>
            </li>
            <li class="side back">
              <div class="sticker"></div>
            </li>
            <li class="side front">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="1" data-y="1" data-z="0" class="cube-part-wrapper cube-part-wrapper-110">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top">
              <div class="sticker"></div>
            </li>
            <li class="side bottom yellow">
              <div class="sticker"></div>
            </li>
            <li class="side right">
              <div class="sticker"></div>
            </li>
            <li class="side left">
              <div class="sticker"></div>
            </li>
            <li class="side back">
              <div class="sticker"></div>
            </li>
            <li class="side front">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="1" data-y="1" data-z="1" class="cube-part-wrapper cube-part-wrapper-111">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top">
              <div class="sticker"></div>
            </li>
            <li class="side bottom">
              <div class="sticker"></div>
            </li>
            <li class="side right">
              <div class="sticker"></div>
            </li>
            <li class="side left">
              <div class="sticker"></div>
            </li>
            <li class="side back">
              <div class="sticker"></div>
            </li>
            <li class="side front">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="1" data-y="1" data-z="2" class="cube-part-wrapper cube-part-wrapper-112">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top white">
              <div class="sticker"></div>
            </li>
            <li class="side bottom">
              <div class="sticker"></div>
            </li>
            <li class="side right">
              <div class="sticker"></div>
            </li>
            <li class="side left">
              <div class="sticker"></div>
            </li>
            <li class="side back">
              <div class="sticker"></div>
            </li>
            <li class="side front">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="1" data-y="2" data-z="0" class="cube-part-wrapper cube-part-wrapper-120">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top">
              <div class="sticker"></div>
            </li>
            <li class="side bottom yellow">
              <div class="sticker"></div>
            </li>
            <li class="side right orange">
              <div class="sticker"></div>
            </li>
            <li class="side left">
              <div class="sticker"></div>
            </li>
            <li class="side back">
              <div class="sticker"></div>
            </li>
            <li class="side front">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="1" data-y="2" data-z="1" class="cube-part-wrapper cube-part-wrapper-121">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top">
              <div class="sticker"></div>
            </li>
            <li class="side bottom">
              <div class="sticker"></div>
            </li>
            <li class="side right orange">
              <div class="sticker"></div>
            </li>
            <li class="side left">
              <div class="sticker"></div>
            </li>
            <li class="side back">
              <div class="sticker"></div>
            </li>
            <li class="side front">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="1" data-y="2" data-z="2" class="cube-part-wrapper cube-part-wrapper-122">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top white">
              <div class="sticker"></div>
            </li>
            <li class="side bottom">
              <div class="sticker"></div>
            </li>
            <li class="side right orange">
              <div class="sticker"></div>
            </li>
            <li class="side left">
              <div class="sticker"></div>
            </li>
            <li class="side back">
              <div class="sticker"></div>
            </li>
            <li class="side front">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="2" data-y="0" data-z="0" class="cube-part-wrapper cube-part-wrapper-200">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top">
              <div class="sticker"></div>
            </li>
            <li class="side bottom yellow">
              <div class="sticker"></div>
            </li>
            <li class="side right">
              <div class="sticker"></div>
            </li>
            <li class="side left red">
              <div class="sticker"></div>
            </li>
            <li class="side back green">
              <div class="sticker"></div>
            </li>
            <li class="side front">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="2" data-y="0" data-z="1" class="cube-part-wrapper cube-part-wrapper-201">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top">
              <div class="sticker"></div>
            </li>
            <li class="side bottom">
              <div class="sticker"></div>
            </li>
            <li class="side right">
              <div class="sticker"></div>
            </li>
            <li class="side left red">
              <div class="sticker"></div>
            </li>
            <li class="side back green">
              <div class="sticker"></div>
            </li>
            <li class="side front">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="2" data-y="0" data-z="2" class="cube-part-wrapper cube-part-wrapper-202">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top white">
              <div class="sticker"></div>
            </li>
            <li class="side bottom">
              <div class="sticker"></div>
            </li>
            <li class="side right">
              <div class="sticker"></div>
            </li>
            <li class="side left red">
              <div class="sticker"></div>
            </li>
            <li class="side back green">
              <div class="sticker"></div>
            </li>
            <li class="side front">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="2" data-y="1" data-z="0" class="cube-part-wrapper cube-part-wrapper-210">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top">
              <div class="sticker"></div>
            </li>
            <li class="side bottom yellow">
              <div class="sticker"></div>
            </li>
            <li class="side right">
              <div class="sticker"></div>
            </li>
            <li class="side left">
              <div class="sticker"></div>
            </li>
            <li class="side back green">
              <div class="sticker"></div>
            </li>
            <li class="side front">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="2" data-y="1" data-z="1" class="cube-part-wrapper cube-part-wrapper-211">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top">
              <div class="sticker"></div>
            </li>
            <li class="side bottom">
              <div class="sticker"></div>
            </li>
            <li class="side right">
              <div class="sticker"></div>
            </li>
            <li class="side left">
              <div class="sticker"></div>
            </li>
            <li class="side back green">
              <div class="sticker"></div>
            </li>
            <li class="side front">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="2" data-y="1" data-z="2" class="cube-part-wrapper cube-part-wrapper-212">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top white">
              <div class="sticker"></div>
            </li>
            <li class="side bottom">
              <div class="sticker"></div>
            </li>
            <li class="side right">
              <div class="sticker"></div>
            </li>
            <li class="side left">
              <div class="sticker"></div>
            </li>
            <li class="side back green">
              <div class="sticker"></div>
            </li>
            <li class="side front">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="2" data-y="2" data-z="0" class="cube-part-wrapper cube-part-wrapper-220">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top">
              <div class="sticker"></div>
            </li>
            <li class="side bottom yellow">
              <div class="sticker"></div>
            </li>
            <li class="side right orange">
              <div class="sticker"></div>
            </li>
            <li class="side left">
              <div class="sticker"></div>
            </li>
            <li class="side back green">
              <div class="sticker"></div>
            </li>
            <li class="side front">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="2" data-y="2" data-z="1" class="cube-part-wrapper cube-part-wrapper-221">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top">
              <div class="sticker"></div>
            </li>
            <li class="side bottom">
              <div class="sticker"></div>
            </li>
            <li class="side right orange">
              <div class="sticker"></div>
            </li>
            <li class="side left">
              <div class="sticker"></div>
            </li>
            <li class="side back green">
              <div class="sticker"></div>
            </li>
            <li class="side front">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
      <div data-x="2" data-y="2" data-z="2" class="cube-part-wrapper cube-part-wrapper-222">
        <div class="axis axis-part">
          <ul class="cube-part">
            <li class="side top white">
              <div class="sticker"></div>
            </li>
            <li class="side bottom">
              <div class="sticker"></div>
            </li>
            <li class="side right orange">
              <div class="sticker"></div>
            </li>
            <li class="side left">
              <div class="sticker"></div>
            </li>
            <li class="side back green">
              <div class="sticker"></div>
            </li>
            <li class="side front">
              <div class="sticker"></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

/**  ██████╗  █████╗ ███████╗███████╗
  *  ██╔══██╗██╔══██╗██╔════╝██╔════╝
  *  ██████╔╝███████║███████╗█████╗
  *  ██╔══██╗██╔══██║╚════██║██╔══╝
  *  ██████╔╝██║  ██║███████║███████╗
  *  ╚═════╝ ╚═╝  ╚═╝╚══════╝╚══════╝
  */
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: inherit;
  line-height: inherit;
  font-weight: 300;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
html {
  height: 100%;
  min-height: 100%;
  font-size: 16px;
  font-family: 'Lato', sans-serif;
  line-height: 1.25;
  color: #ffffff;
}
html,
body {
  overflow: hidden;
}
body {
  background: #2b4746;
}
ul,
ol {
  list-style: none;
}
ul li,
ol li {
  list-style: inherit;
}
h1 {
  font-size: 1.5em;
  margin: 0 1rem 0.5em;
}
h2 {
  font-size: 1.3em;
  margin: 0 1rem 0.5em;
}
h3 {
  font-size: 1.1em;
  margin: 0 1rem 0.5em;
}
/**
 *  ███████╗██████╗  █████╗ ███╗   ███╗███████╗
 *  ██╔════╝██╔══██╗██╔══██╗████╗ ████║██╔════╝
 *  █████╗  ██████╔╝███████║██╔████╔██║█████╗
 *  ██╔══╝  ██╔══██╗██╔══██║██║╚██╔╝██║██╔══╝
 *  ██║     ██║  ██║██║  ██║██║ ╚═╝ ██║███████╗
 *  ╚═╝     ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝     ╚═╝╚══════╝
 *
 */
body {
  cursor: -webkit-grab;
  cursor: grab;
}
body:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.canvas {
  position: absolute;
  height: 22.5rem;
  width: 15rem;
  overflow: visible;
  top: 14em;
  left: 50%;
  margin-left: -7.5rem;
  -webkit-perspective: 700px;
          perspective: 700px;
}
.canvas:hover {
  cursor: -webkit-grab;
  cursor: grab;
}
.canvas:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
/**
 *  ███████╗ ██████╗ ██████╗ ███╗   ███╗███████╗
 *  ██╔════╝██╔═══██╗██╔══██╗████╗ ████║██╔════╝
 *  █████╗  ██║   ██║██████╔╝██╔████╔██║███████╗
 *  ██╔══╝  ██║   ██║██╔══██╗██║╚██╔╝██║╚════██║
 *  ██║     ╚██████╔╝██║  ██║██║ ╚═╝ ██║███████║
 *  ╚═╝      ╚═════╝ ╚═╝  ╚═╝╚═╝     ╚═╝╚══════╝
 */
::-moz-focus-inner {
  outline: 0;
}
button {
  line-height: 1;
}
button:focus {
  outline: 0;
}
button {
  margin: 0 1rem 1rem;
  padding: 1em;
  font-size: 0.6rem;
  background: #2b4746;
  border: 0.1rem solid #fff;
  color: #fff;
  box-shadow: none;
  border-radius: 0.1rem;
  cursor: pointer;
  font-variant: small-caps;
}
button:focus,
button:hover {
  color: #182727;
  background: #fff;
  border-color: #182727;
}
button:active {
  color: #fff;
  border-color: #182727;
  background-color: #182727;
}
button:focus {
  outline: 0;
}
button.selected {
  color: #fff;
  border-color: #182727;
  background-color: #182727;
}
.controls {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 20rem;
  z-index: 5;
  padding-left: 1rem;
  padding-top: 1rem;
  cursor: default;
}
/**
 *   ██████╗██╗   ██╗██████╗ ███████╗███████╗
 *  ██╔════╝██║   ██║██╔══██╗██╔════╝██╔════╝
 *  ██║     ██║   ██║██████╔╝█████╗  ███████╗
 *  ██║     ██║   ██║██╔══██╗██╔══╝  ╚════██║
 *  ╚██████╗╚██████╔╝██████╔╝███████╗███████║
 *   ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝╚══════╝
 */
.cube {
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  -webkit-transition: -webkit-transform 400ms linear;
  transition: -webkit-transform 400ms linear;
  transition: transform 400ms linear;
  transition: transform 400ms linear, -webkit-transform 400ms linear;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotate3d(0, 1, 0, -35deg) rotate3d(1, 0, 0, 35deg);
          transform: rotate3d(0, 1, 0, -35deg) rotate3d(1, 0, 0, 35deg);
}
.cube .swiper {
  position: absolute;
  left: 0;
  top: 0;
  height: 15rem;
  width: 15rem;
  outline-offset: 10px;
  visibility: visible;
}
.cube .swiper.top {
  -webkit-transform: rotate3d(0, 1, 0, -180deg) translate3d(0, 0, -7.89473684rem);
          transform: rotate3d(0, 1, 0, -180deg) translate3d(0, 0, -7.89473684rem);
}
.cube .swiper.bottom {
  -webkit-transform: translate3d(0, 0, -7.89473684rem);
          transform: translate3d(0, 0, -7.89473684rem);
}
.cube .swiper.left {
  -webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -7.89473684rem);
          transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -7.89473684rem);
}
.cube .swiper.right {
  -webkit-transform: rotate3d(0, 0, 1, -180deg) rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -7.89473684rem);
          transform: rotate3d(0, 0, 1, -180deg) rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -7.89473684rem);
}
.cube .swiper.front {
  -webkit-transform: rotate3d(1, 0, 0, -180deg) rotate3d(1, 0, 0, -90deg) translate3d(0, 0, -7.89473684rem);
          transform: rotate3d(1, 0, 0, -180deg) rotate3d(1, 0, 0, -90deg) translate3d(0, 0, -7.89473684rem);
}
.cube .swiper.back {
  -webkit-transform: rotate3d(0, 1, 0, -180deg) rotate3d(1, 0, 0, -90deg) translate3d(0, 0, -7.89473684rem);
          transform: rotate3d(0, 1, 0, -180deg) rotate3d(1, 0, 0, -90deg) translate3d(0, 0, -7.89473684rem);
}
.cube-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 15rem;
  width: 15rem;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transition-duration: 0;
          transition-duration: 0;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  visibility: hidden;
}
.cube-part {
  height: inherit;
  width: inherit;
}
.cube-part .side {
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  line-height: 5rem;
  text-align: center;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  border-radius: 0.6rem;
}
.cube-part .side.white,
.cube-part .side.blue,
.cube-part .side.orange,
.cube-part .side.red,
.cube-part .side.green,
.cube-part .side.yellow {
  background: #1e1e1e;
}
.cube-part .side.white .sticker,
.cube-part .side.blue .sticker,
.cube-part .side.orange .sticker,
.cube-part .side.red .sticker,
.cube-part .side.green .sticker,
.cube-part .side.yellow .sticker {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  visibility: visible;
}
.cube-part .side.front {
  -webkit-transform: translate3d(-2.5rem, 0, 0) rotate3d(0, 1, 0, -90deg) scale(1);
          transform: translate3d(-2.5rem, 0, 0) rotate3d(0, 1, 0, -90deg) scale(1);
}
.cube-part .side.back {
  -webkit-transform: translate3d(2.5rem, 0, 0) rotate3d(0, 1, 0, 90deg) scale(1);
          transform: translate3d(2.5rem, 0, 0) rotate3d(0, 1, 0, 90deg) scale(1);
}
.cube-part .side.right {
  -webkit-transform: translate3d(0, 2.5rem, 0) rotate3d(1, 0, 0, -90deg) scale(1);
          transform: translate3d(0, 2.5rem, 0) rotate3d(1, 0, 0, -90deg) scale(1);
}
.cube-part .side.left {
  -webkit-transform: translate3d(0, -2.5rem, 0) rotate3d(1, 0, 0, 90deg) scale(1);
          transform: translate3d(0, -2.5rem, 0) rotate3d(1, 0, 0, 90deg) scale(1);
}
.cube-part .side.top {
  -webkit-transform: translate3d(0, 0, 2.5rem) rotate3d(1, 0, 0, 0) scale(1);
          transform: translate3d(0, 0, 2.5rem) rotate3d(1, 0, 0, 0) scale(1);
}
.cube-part .side.bottom {
  -webkit-transform: translate3d(0, 0, -2.5rem) rotate3d(1, 0, 0, -180deg) scale(1);
          transform: translate3d(0, 0, -2.5rem) rotate3d(1, 0, 0, -180deg) scale(1);
}
.cube-part-wrapper {
  position: absolute;
  height: 5rem;
  width: 5rem;
  z-index: 0;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 800ms;
          transition-duration: 800ms;
  pointer-events: none;
  visibility: hidden;
}
.cube-part-wrapper[data-x="0"] {
  left: 0;
}
.cube-part-wrapper[data-x="1"] {
  left: 5rem;
}
.cube-part-wrapper[data-x="2"] {
  left: 10rem;
}
.cube-part-wrapper[data-y="0"] {
  top: 0;
}
.cube-part-wrapper[data-y="1"] {
  top: 5rem;
}
.cube-part-wrapper[data-y="2"] {
  top: 10rem;
}
.cube-part-wrapper[data-z="0"] {
  -webkit-transform: translate3d(0, 0, -5rem);
          transform: translate3d(0, 0, -5rem);
}
.cube-part-wrapper[data-z="1"] {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.cube-part-wrapper[data-z="2"] {
  -webkit-transform: translate3d(0, 0, 5rem);
          transform: translate3d(0, 0, 5rem);
}
/**
 *   ██████╗ ██████╗ ██╗██████╗
 *  ██╔════╝ ██╔══██╗██║██╔══██╗
 *  ██║  ███╗██████╔╝██║██████╔╝
 *  ██║   ██║██╔══██╗██║██╔═══╝
 *  ╚██████╔╝██║  ██║██║██║
 *   ╚═════╝ ╚═╝  ╚═╝╚═╝╚═╝
 *
 */
.grip {
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  pointer-events: none;
}
.grip .axis {
  -webkit-transition: -webkit-transform 400ms;
  transition: -webkit-transform 400ms;
  transition: transform 400ms;
  transition: transform 400ms, -webkit-transform 400ms;
}
.grip .axis.manual {
  -webkit-transition: none;
  transition: none;
}
.grip .axis.fast {
  -webkit-transition: -webkit-transform 200ms;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
}
.axis {
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/**
 * ████████╗██╗  ██╗███████╗███╗   ███╗███████╗
 * ╚══██╔══╝██║  ██║██╔════╝████╗ ████║██╔════╝
 *    ██║   ███████║█████╗  ██╔████╔██║█████╗
 *    ██║   ██╔══██║██╔══╝  ██║╚██╔╝██║██╔══╝
 *    ██║   ██║  ██║███████╗██║ ╚═╝ ██║███████╗
 *    ╚═╝   ╚═╝  ╚═╝╚══════╝╚═╝     ╚═╝╚══════╝
 */
.theme-flat .cube-part-wrapper-112 .cube-part .side.white .sticker {
  background-image: url('https://www.webhek.com/demos/codepens/rubik-logo.png');
  background-size: 100% auto;
}
.theme-flat .cube-part .side {
  background: none;
  border-radius: 0;
}
.theme-flat .cube-part .side.white .sticker,
.theme-flat .cube-part .side.blue .sticker,
.theme-flat .cube-part .side.orange .sticker,
.theme-flat .cube-part .side.red .sticker,
.theme-flat .cube-part .side.green .sticker,
.theme-flat .cube-part .side.yellow .sticker {
  -webkit-transform: translateZ(1px);
          transform: translateZ(1px);
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  right: 0.3rem;
  bottom: 0.3rem;
  border-radius: 0.3rem;
  z-index: 2;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.theme-flat .cube-part .side.white .sticker {
  background-color: #ffffff;
}
.theme-flat .cube-part .side.blue .sticker {
  background-color: #0051ba;
}
.theme-flat .cube-part .side.orange .sticker {
  background-color: #ff5800;
}
.theme-flat .cube-part .side.red .sticker {
  background-color: #c41e3a;
}
.theme-flat .cube-part .side.green .sticker {
  background-color: #009e60;
}
.theme-flat .cube-part .side.yellow .sticker {
  background-color: #ffd500;
}
/**
 * ████████╗██╗  ██╗███████╗███╗   ███╗███████╗
 * ╚══██╔══╝██║  ██║██╔════╝████╗ ████║██╔════╝
 *    ██║   ███████║█████╗  ██╔████╔██║█████╗
 *    ██║   ██╔══██║██╔══╝  ██║╚██╔╝██║██╔══╝
 *    ██║   ██║  ██║███████╗██║ ╚═╝ ██║███████╗
 *    ╚═╝   ╚═╝  ╚═╝╚══════╝╚═╝     ╚═╝╚══════╝
 */
.theme-realistic .cube-part-wrapper-112 .cube-part .side.white .sticker {
  background-image: url('https://www.webhek.com/demos/codepens/rubik-logo.png');
  background-size: 100% auto;
}
.theme-realistic .cube-part .side {
  visibility: visible;
  box-shadow: 0 0 2px 0 #3f3f3f inset, 0 0 0 0.3rem #2b2b2b inset;
  border-radius: 0.6rem;
  background-color: #1e1e1e;
}
.theme-realistic .cube-part .side .sticker {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0.6rem;
  z-index: 2;
  background-color: #1e1e1e;
  box-shadow: 0 0 2px 0 #3f3f3f inset, 0 0 0 0.3rem #2b2b2b inset, 0 0 1px 0.4rem rgba(255, 255, 255, 0.2) inset;
  background-image: -webkit-radial-gradient(ellipse farthest-corner, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0));
  background-image: radial-gradient(ellipse farthest-corner, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0));
}
.theme-realistic .cube-part .side.white .sticker {
  background-color: #ffffff;
}
.theme-realistic .cube-part .side.blue .sticker {
  background-color: #0051ba;
}
.theme-realistic .cube-part .side.orange .sticker {
  background-color: #ff5800;
}
.theme-realistic .cube-part .side.red .sticker {
  background-color: #c41e3a;
}
.theme-realistic .cube-part .side.green .sticker {
  background-color: #009e60;
}
.theme-realistic .cube-part .side.yellow .sticker {
  background-color: #ffd500;
}
.theme-realistic .cube-part .side.white .sticker,
.theme-realistic .cube-part .side.blue .sticker,
.theme-realistic .cube-part .side.orange .sticker,
.theme-realistic .cube-part .side.red .sticker,
.theme-realistic .cube-part .side.green .sticker,
.theme-realistic .cube-part .side.yellow .sticker {
  -webkit-transform: translateZ(1px);
          transform: translateZ(1px);
}

/* jshint sub: true */
(function($, window, document, undefined) {
  'use strict';
  var data = {};
  var allTurns = ['base', 'left', 'right'];
  var allAx = ['x', 'y', 'z'];
  for (var a = 0; a < allAx.length; a++) {
    data[allAx[a]] = {};
    for (var l = 0; l < allTurns.length; l++) {
      data[allAx[a]][allTurns[l]] = {};
    }
  }
  var makeData1 = function(m, n, o, i, dir) {
    var v = $.extend(true, [], data[m].base[i]);
    var w = $.extend(true, [], data[m].base[i]);
    data[m][dir][i] = v.sort(function(a, b) {
      if (a[o] > b[o]) {
        return 1;
      } else if (a[o] < b[o]) {
        return -1;
      } else {
        if (a[n] > b[n]) {
          return -1;
        } else {
          return 1;
        }
      }
    });

  };

  var makeData2 = function(m, n, o, i, dir) {
    var v = $.extend(true, [], data[m].base[i]);
    var w = $.extend(true, [], data[m].base[i]);
    data[m][dir][i] = w.sort(function(a, b) {
      if (a[o] > b[o]) {
        return -1;
      } else if (a[o] < b[o]) {
        return 1;
      } else {
        if (a[n] > b[n]) {
          return 1;
        } else {
          return -1;
        }
      }
    });
  };

  var makeData3 = function(m, n, o, i, dir) {
    var v = $.extend(true, [], data[m].base[i]);
    var w = $.extend(true, [], data[m].base[i]);
    data[m][dir][i] = v.sort(function(a, b) {
      if (a[o] > b[o]) {
        return 1;
      } else if (a[o] < b[o]) {
        return -1;
      } else {
        if (a[n] > b[n]) {
          return 1;
        } else {
          return -1;
        }
      }
    });
  };

  var makeData4 = function(m, n, o, i, dir) {
    var v = $.extend(true, [], data[m].base[i]);
    var w = $.extend(true, [], data[m].base[i]);
    data[m][dir][i] = w.sort(function(a, b) {
      if (a[o] > b[o]) {
        return -1;
      } else if (a[o] < b[o]) {
        return 1;
      } else {
        if (a[n] > b[n]) {
          return -1;
        } else {
          return 1;
        }
      }
    });
  };


  for (var i = 0; i < 3; i++) {
    data['x']['base'][i] = [{
      'x': i,
      'y': 0,
      'z': 0
    }, {
      'x': i,
      'y': 0,
      'z': 1
    }, {
      'x': i,
      'y': 0,
      'z': 2
    }, {
      'x': i,
      'y': 1,
      'z': 0
    }, {
      'x': i,
      'y': 1,
      'z': 1
    }, {
      'x': i,
      'y': 1,
      'z': 2
    }, {
      'x': i,
      'y': 2,
      'z': 0
    }, {
      'x': i,
      'y': 2,
      'z': 1
    }, {
      'x': i,
      'y': 2,
      'z': 2
    }];
    data['y']['base'][i] = [{
      'x': 0,
      'y': i,
      'z': 0
    }, {
      'x': 0,
      'y': i,
      'z': 1
    }, {
      'x': 0,
      'y': i,
      'z': 2
    }, {
      'x': 1,
      'y': i,
      'z': 0
    }, {
      'x': 1,
      'y': i,
      'z': 1
    }, {
      'x': 1,
      'y': i,
      'z': 2
    }, {
      'x': 2,
      'y': i,
      'z': 0
    }, {
      'x': 2,
      'y': i,
      'z': 1
    }, {
      'x': 2,
      'y': i,
      'z': 2
    }];
    data['z']['base'][i] = [{
      'x': 0,
      'y': 2,
      'z': i
    }, {
      'x': 1,
      'y': 2,
      'z': i
    }, {
      'x': 2,
      'y': 2,
      'z': i
    }, {
      'x': 0,
      'y': 1,
      'z': i
    }, {
      'x': 1,
      'y': 1,
      'z': i
    }, {
      'x': 2,
      'y': 1,
      'z': i
    }, {
      'x': 0,
      'y': 0,
      'z': i
    }, {
      'x': 1,
      'y': 0,
      'z': i
    }, {
      'x': 2,
      'y': 0,
      'z': i
    }];
    makeData1('x', 'y', 'z', i, 'left');
    makeData2('x', 'y', 'z', i, 'right');
    makeData2('y', 'x', 'z', i, 'left');
    makeData1('y', 'x', 'z', i, 'right');
    makeData3('z', 'y', 'x', i, 'left');
    makeData4('z', 'y', 'x', i, 'right');

  }
  var rotate3d = {
    'x': '1,0,0,',
    'y': '0,1,0,',
    'z': '0,0,1,'
  };
  var $gripAxis;
  var cubeRotationSpeed = 1.5;
  var cache = {};
  var canvas = {
    'threshold': 10,
    'block': false,
    'down': false,
    'axis': null,
    'css': '',
    'mouse': {
      'distance': 0,
      'time': 0
    }
  };
  var randomNumber = function(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };
  var classWithPrefix = function(regex) {
    return function(index, classes) {
      return classes.split(/\s+/).filter(function(el) {
        return regex.test(el);
      }).join(' ');
    };
  };
  /**
   * @jsdoc function
   * @name rubics.clearHelpers
   * @description
   *   clear the grip after the rotation
   */
  var clearHelpers = function() {
    var $gripAxis = $('.grip .axis');
    $gripAxis.css({
      transition: 'none',
      transform: ''
    });
    setTimeout(function() {
      $gripAxis.css({
        transition: ''
      });
    }, 0);
  };
  /**
   * @jsdoc function
   * @name rubics.positionParts
   * @description
   *   puts the cubes in the new position
   */
  var positionParts = function(turnAxis, level, direction) {
    if (!turnAxis) {
      return false;
    }
    var axis = ['x', 'y', 'z'];
    var elements = [];
    var oppositeDirection = direction === 'right' ? 'left' : 'right';
    $.each(data[turnAxis]['base'][level], function(i, obj) {
      var selector3d = '[data-x="';
      selector3d += obj['x'];
      selector3d += '"][data-y="';
      selector3d += obj['y'];
      selector3d += '"][data-z="';
      selector3d += obj['z'] + '"]';
      elements.push($(selector3d));
    });
    $.each(elements, function(i, el) {
      $.each(axis, function(j, ax) {
        $(el).attr('data-' +
          ax, data[turnAxis][oppositeDirection][level][i][ax]);
      });
    });
  };
  /**
   * @jsdoc function
   * @name rubics.performTurn
   * @description
   *   performes the turn.
   *   allows a callback when the turn is done
   */
  var performTurn = function(rotate3d, turnAxis, direction, callback) {
    var degree = direction === 'right' ? 90 : -90;
    $('.grip').find('.axis-grip:first').css({
      transform: 'rotate3d(' +
        rotate3d[turnAxis] +
        degree +
        'deg)'
    }).one('transitionend', callback);
  };
  /**
   * @jsdoc function
   * @name rubics.rotateParts
   * @description
   *   rotates the parts
   */
  var rotateParts = function(rotate3d, turnAxis, direction) {
    $('.grip .cube-part-wrapper').each(function(i, el) {
      var degree = direction === 'right' ? 90 : -90;
      var css = $(el).find('.axis-part')[0].style.transform;
      css = css === 'none' ? '' : css;
      css = 'rotate3d(' +
        rotate3d[turnAxis] +
        degree +
        'deg) ' +
        css;
      $(el).find('.axis-part').css({
        transform: css
      });
    });
  };
  /**
   * @jsdoc function
   * @name rubics.attachParts
   * @description
   *   puts the parts back into the cube
   */
  var attachParts = function(turnAxis, level) {
    $('[data-' + turnAxis + '=' + level + ']')
      .appendTo('.cube');
  };
  /**
   * @jsdoc function
   * @name rubics.detachParts
   * @description
   *   puts the parts into the grip
   */
  var detachParts = function(turnAxis, level) {
    $('[data-' + turnAxis + '=' + level + ']')
      .appendTo('.grip .axis-grip');
  };

  /**
   * @jsdoc function
   * @name rubics.autoTurn
   * @description
   *   automatically turn
   */
  var autoTurn = function(turnAxis, level, direction) {
    if (!canvas.block) {
      canvas.block = true;
      turnAxis = turnAxis || 'x';
      level = level || 0;
      detachParts(turnAxis, level);
      performTurn(rotate3d, turnAxis, direction, function() {
        rotateParts(rotate3d, turnAxis, direction);
        attachParts(turnAxis, level);
        clearHelpers();
        positionParts(turnAxis, level, direction);
        window.setTimeout(function() {
          canvas.block = false;
        }, 2);
      });
    } else {
      return;
    }
  };

  /**
   * @jsdoc function
   * @name rubics.scrambleCube
   * @description
   *   scramble the cube
   */
  var scrambleCube = function(n) {
    var axis = ['x', 'y', 'z'];
    var direction = ['left', 'right'];

    $gripAxis.addClass('fast');
    var duration = $gripAxis.css('transition-duration');
    duration = (parseFloat(duration) + 0.1) * 1000;
    var play = setInterval(function() {
      var dir = direction[randomNumber(0, 1)];
      var axi = axis[randomNumber(0, 2)];
      var level = randomNumber(0, 2);


      dir = cache.dir === dir ? (dir === 'left' ? 'right' : 'left') : dir;
      axi = cache.axi === axi ? (axi === 'x' ? 'y' : 'z') : axi;
      axi = cache.axi === axi ? (axi === 'z' ? 'x' : 'y') : axi;
      axi = cache.axi === axi ? (axi === 'y' ? 'z' : 'x') : axi;
      level = level === 1 ? randomNumber(0, 2) : level;
      level = level === 1 ? 2 : level;
      level = cache.level === level ? (level === 0 ? 2 : 0) : level;
      level = cache.level === level ? (level === 2 ? 0 : 2) : level;

      cache = {
        dir: dir,
        axi: axi,
        level: level
      };
      autoTurn(axi, level, dir);
    }, duration);
    setTimeout(function() {
      $gripAxis.removeClass('fast');
      if (play) {
        clearTimeout(play);
      }
    }, duration * n);
  };


 
  /**
   * @jsdoc function
   * @name rubics.releaseSwiper
   * @description
   *   release the Swiper
   */
  var releaseSwiper = function(e) {
    if (canvas.swiper && canvas.swiper.play) {
      canvas.swiper.play = false;
      if (!canvas.swiper.move) {
        return false;
      }
      canvas.swiper.move = false;
      if (canvas.swiper.degree >= -30 && canvas.swiper.degree <= 30) {
        $gripAxis.removeClass('manual').css({
          transform: 'rotate3d(0,0,0,0deg)'
        }).one('transitionend', function() {
          attachParts(canvas.swiper.axis, canvas.swiper.level);
          clearHelpers();
        });
      } else {
        var direction = canvas.swiper.degree > 0 ? 'right' : 'left';
        $gripAxis.removeClass('manual').css({
          transform: 'rotate3d(' +
            rotate3d[canvas.swiper.axis] +
            (canvas.swiper.degree > 0 ? '90' : '-90') + 'deg)'
        }).one('transitionend', function() {
          rotateParts(rotate3d, canvas.swiper.axis, direction);
          attachParts(canvas.swiper.axis, canvas.swiper.level);
          clearHelpers();
          positionParts(canvas.swiper.axis, canvas.swiper.level, direction);
          canvas.swiper = false;
        });
      }
    }
  };
  /**
   * @jsdoc function
   * @name rubics.moveSwiper
   * @description
   *   movement on the the Swiper
   */
  var moveSwiper = function(e) {
    if (canvas.swiper && canvas.swiper.play) {
     e.preventDefault();
     canvas.swiper.move = {
        'x': e.offsetX || e.originalEvent.layerX,
        'y': e.offsetY || e.originalEvent.layerY
      };
      canvas.swiper.distance = {};
      canvas.swiper.distance.x = (canvas.swiper.start.x -
        canvas.swiper.move.x) /
        canvas.swiper.size.x * 90;
      canvas.swiper.distance.y = (canvas.swiper.start.y -
        canvas.swiper.move.y) /
        canvas.swiper.size.x * 90;

      if (!canvas.swiper.active &&
        (canvas.swiper.distance.x > canvas.threshold ||
          canvas.swiper.distance.x < -1 * canvas.threshold)) {
        canvas.swiper.axis = canvas.swiper.sides.x;
        canvas.swiper.degree = (canvas.swiper.start.x -
          canvas.swiper.move.x) /
          canvas.swiper.size.x * 90;
        canvas.swiper.side = 'y';
        canvas.swiper.turn = 'x';
        canvas.swiper.active = true;
      } else if (!canvas.swiper.active &&
        (canvas.swiper.distance.y > canvas.threshold ||
          canvas.swiper.distance.y < -1 * canvas.threshold)) {
        canvas.swiper.axis = canvas.swiper.sides.y;
        canvas.swiper.side = 'x';
        canvas.swiper.turn = 'y';
        canvas.swiper.active = true;
      }
      if (canvas.swiper.axis) {

        if (!canvas.swiper.init) {
          canvas.swiper.init = true;
          if (canvas.swiper.delta[canvas.swiper.side] < 1.5) {
            canvas.swiper.level = canvas.swiper.side === 'x' ? 0 : 2;
            canvas.swiper.level = canvas.swiper.side === 'y' &&
              canvas.swiper.control === 'right' ? 0 : canvas.swiper.level;
            canvas.swiper.level = canvas.swiper.side === 'x' &&
              canvas.swiper.control === 'front' ? 2 : canvas.swiper.level;
            canvas.swiper.level = canvas.swiper.side === 'x' &&
              canvas.swiper.control === 'bottom' ? 2 : canvas.swiper.level;

            canvas.swiper.level = canvas.swiper.controls === 'front' &&
              canvas.swiper.side === 'x' ? 0 : canvas.swiper.level;
          } else if (canvas.swiper.delta[canvas.swiper.side] < 3) {
            return false; // can't turn ceter slice
            canvas.swiper.level = 1;
          } else {
            canvas.swiper.level = canvas.swiper.side === 'x' ? 2 : 0;
            canvas.swiper.level = canvas.swiper.side === 'y' &&
              canvas.swiper.control === 'right' ? 2 : canvas.swiper.level;
            canvas.swiper.level = canvas.swiper.side === 'x' &&
              canvas.swiper.control === 'front' ? 0 : canvas.swiper.level;
            canvas.swiper.level = canvas.swiper.side === 'x' &&
              canvas.swiper.control === 'bottom' ? 0 : canvas.swiper.level;

          }
          detachParts(canvas.swiper.axis, canvas.swiper.level);
          $gripAxis
            .addClass('manual');
        }

        var factor = 1;
        factor = canvas.swiper.side === 'x' &&
          canvas.swiper.control === 'front' ? -1 : factor;
        factor = canvas.swiper.side === 'y' &&
          canvas.swiper.control === 'right' ? -1 : factor;
        factor = canvas.swiper.side === 'x' &&
          canvas.swiper.control === 'bottom' ? -1 : factor;
        canvas.swiper.degree = (canvas.swiper.start[canvas.swiper.turn] -
          canvas.swiper.move[canvas.swiper.turn]) /
          canvas.swiper.size[canvas.swiper.side] * 90 * factor;
        $gripAxis.css({
          transform: 'rotate3d(' +
            rotate3d[canvas.swiper.axis] +
            canvas.swiper.degree + 'deg)'
        });
      }
    }
  };

  /**
   * @jsdoc function
   * @name rubics.initSwiper
   * @description
   *   init the Swiper
   */
  var initSwiper = function(e) {

    canvas.swiper = {};
    canvas.swiper.control = $(this).data('control');
    canvas.swiper.play = true;
    canvas.swiper.sides = {
      'x': $(this).data('x'),
      'y': $(this).data('y')
    };
    canvas.swiper.size = {
      'x': e.target.clientWidth,
      'y': e.target.clientHeight
    };
    canvas.swiper.start = {
      'x': e.offsetX || e.originalEvent.layerX,
      'y': e.offsetY || e.originalEvent.layerY
    };
    canvas.swiper.delta = {
      'x': canvas.swiper.size.x / canvas.swiper.start.x,
      'y': canvas.swiper.size.y / canvas.swiper.start.y
    };

  };

  /**
   * @jsdoc function
   * @name rubics.moveCube
   * @description
   *   rotates the cube itself
   */
  var moveCube = function(e) {
    if (!canvas.down) {
      return false;
    }
    e.preventDefault();
    var x = (e.pageX - canvas['mouse']['x']) / 4;
    var y = (e.pageY - canvas['mouse']['y']) / -4;
    var transformation = '';
    if ((x > canvas.threshold ||
         x < -1 * canvas.threshold) &&
        canvas['axis'] !== 'x') {
      canvas['axis'] = 'y';
      transformation += 'rotate3d(0, 1, 0, ';
      transformation += x * cubeRotationSpeed;
      transformation += 'deg) ';
      transformation += canvas['css'];
      canvas['mouse']['distance'] = x;
      canvas.moved = true;
    } else if ((y > canvas.threshold ||
                y < -1 * canvas.threshold) &&
               canvas['axis'] !== 'y') {
      canvas['axis'] = 'x';
      transformation += 'rotate3d(1, 0, 0, ';
      transformation += y * cubeRotationSpeed;
      transformation += 'deg) ';
      transformation += canvas['css'];
      canvas['mouse']['distance'] = y;
      canvas.moved = true;

    } else {
      canvas.moved = false;
      return false;
    }
    if (canvas.moved) {
      $('.cube-wrapper').css({
        transform: transformation
      });
    }
  };

  /**
   * @jsdoc function
   * @name rubics.releaseCuber
   * @description
   *   release the Cube
   */
  var releaseCube = function(e) {
    if (canvas.down) {
      canvas.down = false;
      if (!canvas.moved) {
        return false;
      }
      canvas.moved = false;
      canvas['mouse']['end'] = +new Date();
      canvas['mouse']['time'] = canvas['mouse']['end'] - 
        canvas['mouse']['start'];
      canvas['mouse']['bouce'] = (canvas['mouse']['distance'] /
        canvas['mouse']['time']) *
        100;
      canvas['css'] = $('.cube-wrapper')[0].style.transform;
      canvas['mouse']['bouce'] = Math.abs(canvas['mouse']['bouce']) <= 
        5 ? 0 : canvas['mouse']['bouce'];
      $('.cube-wrapper').css({
        transitionDuration: Math.min(Math.abs(canvas['mouse']['bouce'] * 
          20), 300) +
          'ms',
        transform: 'rotate3d(' +
          rotate3d[canvas['axis']] +
          canvas['mouse']['bouce'] *
          cubeRotationSpeed +
          'deg) ' +
          canvas['css']
      }).one('transitionend', function() {
        $('.cube-wrapper').css({
          transitionDuration: ''
        });
      });
    }
  };

  /**
   * @jsdoc function
   * @name rubics.onMouseDown
   * @description
   *   check where we are then perform cubeRotation
   *   if not on buttons or cube
   */
  var onMouseDown = function(e) {
    e.preventDefault();
    if ($(e.target).is('.swiper') ||
        $(e.target).closest('.controls').length) {
      return false;
    }
    canvas.down = true;
    canvas['axis'] = false;
    canvas['mouse']['x'] = e.pageX;
    canvas['mouse']['y'] = e.pageY;
    canvas['css'] = $('.cube-wrapper')[0].style.transform;
    canvas['mouse']['start'] = +new Date();
  };

  $(function() {
    var $themer = $('.themer');
    var $canvas = $('.canvas');
    $gripAxis = $('.grip').find('.axis-grip:first');

    $(document)
      .on('mousedown', onMouseDown)
      .on('mouseup', releaseCube)
      .on('mousemove', moveCube);

    $('.swiper')
      .on('mousedown', initSwiper)
      .on('mouseleave mouseup', releaseSwiper)
      .on('mousemove', moveSwiper);

    $('.themer')
      .on('click', function() {
        var theme = $(this).data('theme');
        $canvas.removeClass(classWithPrefix(/^theme-/));
        $themer.removeClass('selected');
        $canvas.addClass('theme-' + theme);
        $(this).addClass('selected');
      });

    $('.scrambler')
      .on('click', function() {
        scrambleCube(30);
      });

  });
})(window.jQuery, window, document);