/** @module Parallax3D */

/** An effect that will rotate a scene in 3D based on mouse position, using CSS transforms */
export default class Parallax3D {
  /**
   * Initialize
   * @param {HTMLElement} element - the element to be rotated. This should contain children with
   * varying 3D transformations so that a 3D parallax effect is created.
   * @param {String} initialTransform - the CSS transformations to be preserved on the object when
   * 3D transformation is adjusted.
   */
  constructor(element, initialTransform = '', rotmax = 10) {
    this.elem = element;
    this.initialTransform = initialTransform;
    this.rotmax = rotmax;

    this.mousePos = { x: 0, y: 0 };
    window.addEventListener('mousemove', (e) => { this.mouse(e); this.rotate(); });
  }


  /**
   * Update internal storage of mouse position based on a mouse event. Mouse position is stored as
   * an object `{ x: xpos, y: ypos }` where xpos and ypos are both values in the range [-1, 1] and
   * (0, 0) is the center of the screen.
   * @param {MouseEvent} e - passed from the event listener
   */
  mouse(e) {
    const w = window.innerWidth; const h = window.innerHeight;
    const halfw = w / 2; const halfh = h / 2;
    const x = e.clientX; const y = e.clientY;
    const finalx = (x - halfw) / halfw; const finaly = (y - halfh) / halfh;
    [this.mousePos.x, this.mousePos.y] = [finalx, finaly];
  }


  /** Adjust 3D rotation based on the values stored in `this.mousePos` */
  rotate() {
    if (!this.disabled) {
      this.elem.style.transform = [
        this.initialTransform,
        `rotateX(${this.mousePos.y * this.rotmax}deg)`,
        `rotateY(${-this.mousePos.x * this.rotmax}deg)`,
      ].join(' ');
    }
  }


  /** Interrupt changes to rotation */
  disable() {
    this.disabled = true;
  }
  /** Resume changes to rotation */
  enable() {
    this.disabled = false;
  }
}

@@ -1382,24 +1382,176 @@
 aly%5D;%0A  %7D%0A%0A%0A
+  get rotation() %7B%0A    return %5B%0A      %60rotateX($%7Bthis.mousePos.y * this.rotmax%7Ddeg)%60,%0A      %60rotateY($%7Bthis.mousePos.x * this.rotmax%7Ddeg)%60,%0A    %5D;%0A  %7D%0A%0A
   /** Adjust
@@ -1730,111 +1730,24 @@
     
-%60rotateX($%7Bthis.mousePos.y * this.rotmax%7Ddeg)%60,%0A        %60rotateY($%7B-this.mousePos.x * this.rotmax%7Ddeg)%60
+...this.rotation
 ,%0A  

Add rotation property to Parallax3D