JavaScript Is it possible to set the point of origin for rotations, on the parent element?

I've created a 3D cube, that rotates clockwise and anti-clockwise on the Y-axis when the left and right keys are pressed, and then rotates on the X-axis when the up key is pressed.

My issue is, that because of where the rotational point of origin is, after I have rotated the cube on the Y-axis, attempting to then rotate the cube on the X-axis doesn't have the desired result because the rotational axis has been rotated.

Rotating on the X-axis after the Y-axis makes the cube appear as if it's rotating on the Z-axis. Is it possible to add the rotational point of origin on to the parent element, so that the axis isn't effected by the initial rotation?

var xAngle = 0,
  yAngle = 25,
  zAngle = 0,
  rowYAngle = 0;
var movement = 15;
$(document).on('keydown', function(event) {
  console.log(event.keyCode);
  switch (event.keyCode) {

    case 37: // left
      yAngle -= movement;
      break;

    case 38: // up
      xAngle += movement;
      break;

    case 39: // right
      yAngle += movement;
      break;

    case 40: // down
      xAngle -= movement;
      break;
  };

  if (xAngle >= 360) {
    xAngle = 0;
  };

  if (yAngle >= 360) {
    yAngle = 0;
  };



  $("#cube").css({
    '-webkit-transform': 'rotateY(' + yAngle + 'deg) rotateX(' + xAngle + 'deg) rotateZ(' + zAngle + 'deg)'
  });
});
#wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
#cube-container {
  /*width: 100%;*/
  position: absolute;
  top: 30%;
  left: 30%;
}
#cube-viewport {
  -webkit-perspective: 600px;
  -webkit-perspective-origin: 150px 150px;
  max-width: 600px;
}
#cube {
  position: relative;
  height: 300px;
  width: 300px;
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50% -150px;
  -webkit-transform: rotateY(25deg);
  /* opacity: 1;
		 border: 1px black solid;*/
}
.row {
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50% -150px;
  height: auto;
}
#cube .cubie {
  position: absolute;
  margin: 1px;
  border: 1px solid black;
  width: 98px;
  height: 98px;
  background-size: 100px;
  opacity: 1;
  z-index: -1;
  text-align: center;
  font-size: 30px;
  -webkit-transform-origin: 0 0;
}
#cube .cubie.front {
  background-color: red;
}
#cube .cubie.back {
  background-color: blue;
}
#cube .cubie.right {
  background-color: green;
}
#cube .cubie.left {
  background-color: orange;
}
#cube .cubie.down {
  background-color: yellow;
}
#cube .cubie.top {
  background-color: white;
}
.ftl {
  -webkit-transform: rotateX(0) translate3d(0, 0, 0);
}
.fcl {
  -webkit-transform: rotateX(0) translate3d(0, 100px, 0);
}
.fbl {
  -webkit-transform: rotateX(0) translate3d(0, 200px, 0);
}
.ftc {
  -webkit-transform: rotateX(0) translate3d(100px, 0, 0);
}
.fcc {
  -webkit-transform: rotateX(0) translate3d(100px, 100px, 0);
}
.fbc {
  -webkit-transform: rotateX(0) translate3d(100px, 200px, 0);
}
.ftr {
  -webkit-transform: rotateX(0) translate3d(200px, 0, 0);
}
.fcr {
  -webkit-transform: rotateX(0) translate3d(200px, 100px, 0);
}
.fbr {
  -webkit-transform: rotateX(0) translate3d(200px, 200px, 0);
}
.btl {
  -webkit-transform: rotateY(180deg) translate3d(-300px, 0, 300px);
}
.bcl {
  -webkit-transform: rotateY(180deg) translate3d(-300px, 100px, 300px);
}
.bbl {
  -webkit-transform: rotateY(180deg) translate3d(-300px, 200px, 300px);
}
.btc {
  -webkit-transform: rotateY(180deg) translate3d(-200px, 0, 300px);
}
.bcc {
  -webkit-transform: rotateY(180deg) translate3d(-200px, 100px, 300px);
}
.bbc {
  -webkit-transform: rotateY(180deg) translate3d(-200px, 200px, 300px);
}
.btr {
  -webkit-transform: rotateY(180deg) translate3d(-100px, 0, 300px);
}
.bcr {
  -webkit-transform: rotateY(180deg) translate3d(-100px, 100px, 300px);
}
.bbr {
  -webkit-transform: rotateY(180deg) translate3d(-100px, 200px, 300px);
}
.rtl {
  -webkit-transform: rotateY(90deg) translate3d(0, 0, 300px);
}
.rcl {
  -webkit-transform: rotateY(90deg) translate3d(0, 100px, 300px);
}
.rbl {
  -webkit-transform: rotateY(90deg) translate3d(0, 200px, 300px);
}
.rtc {
  -webkit-transform: rotateY(90deg) translate3d(100px, 0, 300px);
}
.rcc {
  -webkit-transform: rotateY(90deg) translate3d(100px, 100px, 300px);
}
.rbc {
  -webkit-transform: rotateY(90deg) translate3d(100px, 200px, 300px);
}
.rtr {
  -webkit-transform: rotateY(90deg) translate3d(200px, 0, 300px);
}
.rcr {
  -webkit-transform: rotateY(90deg) translate3d(200px, 100px, 300px);
}
.rbr {
  -webkit-transform: rotateY(90deg) translate3d(200px, 200px, 300px);
}
.ltl {
  -webkit-transform: rotateY(-90deg) translate3d(-300px, 0, 0);
}
.lcl {
  -webkit-transform: rotateY(-90deg) translate3d(-300px, 100px, 0);
}
.lbl {
  -webkit-transform: rotateY(-90deg) translate3d(-300px, 200px, 0);
}
.ltc {
  -webkit-transform: rotateY(-90deg) translate3d(-200px, 0, 0);
}
.lcc {
  -webkit-transform: rotateY(-90deg) translate3d(-200px, 100px, 0);
}
.lbc {
  -webkit-transform: rotateY(-90deg) translate3d(-200px, 200px, 0);
}
.ltr {
  -webkit-transform: rotateY(-90deg) translate3d(-100px, 0, 0);
}
.lcr {
  -webkit-transform: rotateY(-90deg) translate3d(-100px, 100px, 0);
}
.lbr {
  -webkit-transform: rotateY(-90deg) translate3d(-100px, 200px, 0);
}
.utl {
  -webkit-transform: rotateX(90deg) translate3d(0, -300px, 0);
}
.ucl {
  -webkit-transform: rotateX(90deg) translate3d(0, -200px, 0);
}
.ubl {
  -webkit-transform: rotateX(90deg) translate3d(0, -100px, 0);
}
.utc {
  -webkit-transform: rotateX(90deg) translate3d(100px, -300px, 0);
}
.ucc {
  -webkit-transform: rotateX(90deg) translate3d(100px, -200px, 0);
}
.ubc {
  -webkit-transform: rotateX(90deg) translate3d(100px, -100px, 0);
}
.utr {
  -webkit-transform: rotateX(90deg) translate3d(200px, -300px, 0);
}
.ucr {
  -webkit-transform: rotateX(90deg) translate3d(200px, -200px, 0);
}
.ubr {
  -webkit-transform: rotateX(90deg) translate3d(200px, -100px, 0);
}
.dtl {
  -webkit-transform: rotateX(-90deg) translate3d(0, 0, 300px);
}
.dcl {
  -webkit-transform: rotateX(-90deg) translate3d(0, 100px, 300px);
}
.dbl {
  -webkit-transform: rotateX(-90deg) translate3d(0, 200px, 300px);
}
.dtc {
  -webkit-transform: rotateX(-90deg) translate3d(100px, 0, 300px);
}
.dcc {
  -webkit-transform: rotateX(-90deg) translate3d(100px, 100px, 300px);
}
.dbc {
  -webkit-transform: rotateX(-90deg) translate3d(100px, 200px, 300px);
}
.dtr {
  -webkit-transform: rotateX(-90deg) translate3d(200px, 0, 300px);
}
.dcr {
  -webkit-transform: rotateX(-90deg) translate3d(200px, 100px, 300px);
}
.dbr {
  -webkit-transform: rotateX(-90deg) translate3d(200px, 200px, 300px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="cube-container">
    <div id="cube-viewport">
      <div id="cube">
        <div class="row-1 row">
          <div class="ftl cubie front">
            <div><span>F1</span>
            </div>
          </div>
          <div class="ftc cubie front">
            <div><span>F4</span>
            </div>
          </div>
          <div class="ftr cubie front">
            <div><span>F7</span>
            </div>
          </div>
          <div class="btl cubie back">
            <div><span>B1</span>
            </div>
          </div>
          <div class="btc cubie back">
            <div><span>B4</span>
            </div>
          </div>
          <div class="btr cubie back">
            <div><span>B7</span>
            </div>
          </div>
          <div class="rtl cubie right">
            <div><span>R1</span>
            </div>
          </div>
          <div class="rtc cubie right">
            <div><span>R4</span>
            </div>
          </div>
          <div class="rtr cubie right">
            <div><span>R7</span>
            </div>
          </div>
          <div class="ltl cubie left">
            <div><span>L1</span>
            </div>
          </div>
          <div class="ltc cubie left">
            <div><span>L4</span>
            </div>
          </div>
          <div class="ltr cubie left">
            <div><span>L7</span>
            </div>
          </div>

          <!-- UP FACE -->
          <!-- LEFT COLUMN (L)  -->
          <div class="utl cubie top">
            <div><span>U1</span>
            </div>
          </div>
          <div class="ucl cubie top">
            <div><span>U2</span>
            </div>
          </div>
          <div class="ubl cubie top">
            <div><span>U3</span>
            </div>
          </div>
          <!-- CENTER COLUMN (C)  -->
          <div class="utc cubie top">
            <div><span>U4</span>
            </div>
          </div>
          <div class="ucc cubie top">
            <div><span>U5</span>
            </div>
          </div>
          <div class="ubc cubie top">
            <div><span>U6</span>
            </div>
          </div>
          <!-- RIGHT COLUMN (R)  -->
          <div class="utr cubie top">
            <div><span>U7</span>
            </div>
          </div>
          <div class="ucr cubie top">
            <div><span>U8</span>
            </div>
          </div>
          <div class="ubr cubie top">
            <div><span>U9</span>
            </div>
          </div>
          <!-- END UP FACE -->
        </div>
        <div class="row-2 row">
          <div class="fcl cubie front">
            <div><span>F2</span>
            </div>
          </div>
          <div class="fcc cubie front">
            <div><span>F5</span>
            </div>
          </div>
          <div class="fcr cubie front">
            <div><span>F8</span>
            </div>
          </div>
          <div class="bcl cubie back">
            <div><span>B2</span>
            </div>
          </div>
          <div class="bcc cubie back">
            <div><span>B5</span>
            </div>
          </div>
          <div class="bcr cubie back">
            <div><span>B8</span>
            </div>
          </div>
          <div class="rcl cubie right">
            <div><span>R2</span>
            </div>
          </div>
          <div class="rcc cubie right">
            <div><span>R5</span>
            </div>
          </div>
          <div class="rcr cubie right">
            <div><span>R8</span>
            </div>
          </div>
          <div class="lcl cubie left">
            <div><span>L2</span>
            </div>
          </div>
          <div class="lcc cubie left">
            <div><span>L5</span>
            </div>
          </div>
          <div class="lcr cubie left">
            <div><span>L8</span>
            </div>
          </div>
        </div>

        <div class="row-3 row">
          <div class="fbl cubie front">
            <div><span>F3</span>
            </div>
          </div>
          <div class="fbc cubie front">
            <div><span>F6</span>
            </div>
          </div>
          <div class="fbr cubie front">
            <div><span>F9</span>
            </div>
          </div>
          <div class="bbl cubie back">
            <div><span>B3</span>
            </div>
          </div>
          <div class="bbc cubie back">
            <div><span>B6</span>
            </div>
          </div>
          <div class="bbr cubie back">
            <div><span>B9</span>
            </div>
          </div>
          <div class="rbl cubie right">
            <div><span>R3</span>
            </div>
          </div>
          <div class="rbc cubie right">
            <div><span>R6</span>
            </div>
          </div>
          <div class="rbr cubie right">
            <div><span>R9</span>
            </div>
          </div>
          <div class="lbl cubie left">
            <div><span>L3</span>
            </div>
          </div>
          <div class="lbc cubie left">
            <div><span>L6</span>
            </div>
          </div>
          <div class="lbr cubie left">
            <div><span>L9</span>
            </div>
          </div>
          <div class="dtl cubie down">
            <div><span>D1</span>
            </div>
          </div>
          <div class="dcl cubie down">
            <div><span>D2</span>
            </div>
          </div>
          <div class="dbl cubie down">
            <div><span>D3</span>
            </div>
          </div>
          <div class="dtc cubie down">
            <div><span>D4</span>
            </div>
          </div>
          <div class="dcc cubie down">
            <div><span>D5</span>
            </div>
          </div>
          <div class="dbc cubie down">
            <div><span>D6</span>
            </div>
          </div>
          <div class="dtr cubie down">
            <div><span>D7</span>
            </div>
          </div>
          <div class="dcr cubie down">
            <div><span>D8</span>
            </div>
          </div>
          <div class="dbr cubie down">
            <div><span>D9</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Answer:1

i was curious if it's possible to inject an value into a directives' close scope. I could't find anything related in the angularjs documentation so I tried something. Does anybody know if there is an ...

i was curious if it's possible to inject an value into a directives' close scope. I could't find anything related in the angularjs documentation so I tried something. Does anybody know if there is an ...

I'm following the current tutorial and for some reason when ever I click on the Sign in with Google button nothing seems to happen and I'm not entirely sure why. Here is the code: <html> <...

I'm following the current tutorial and for some reason when ever I click on the Sign in with Google button nothing seems to happen and I'm not entirely sure why. Here is the code: <html> <...

I have been working on nvd3 , in d3.js to make the ticks look good their is a nice() provided for ex. var yScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d[1]; ...

I have been working on nvd3 , in d3.js to make the ticks look good their is a nice() provided for ex. var yScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d[1]; ...

How can I add an option to resize a bootbox.alert(); ? I'm using Bootbox 4.3.0. bootbox.alert("Success",function(){ }); Here is the link for the bootbox.js library.

How can I add an option to resize a bootbox.alert(); ? I'm using Bootbox 4.3.0. bootbox.alert("Success",function(){ }); Here is the link for the bootbox.js library.