Search code examples
javascriptcsstransformtween

Javascript to transform on both X and Y axis (CSS 3D)

I am using tween to rotate on both X and Y axis. But I cant seem to find the correct javascript to edit the css.

Target is a div, and with the following code, it only rotates the axis while ignoring the Y axis.

It uses Tween JS

function update() {

    target.style.left = position.x + 'px';
    target.style.top = position.y + 'px';
    target.style.webkitTransform = 'rotateY(' + Math.floor(position.rotation) + 'deg)';
    target.style.MozTransform = 'rotateY(' + Math.floor(position.rotation) + 'deg)';
    target.style.webkitTransform = 'rotateX(' + Math.floor(position.rotation) + 'deg)';
    target.style.MozTransform = 'rotateY(' + Math.floor(position.rotation) + 'deg)';

}

How do I tell javascript to rotate on both and not just one axis?

Solution

  • You separate arguments with spaces. For example:

    target.style.webkitTransform = 'rotateX(' + Math.floor(rotationX) + 'deg) rotateY(' + Math.floor(rotationY) + 'deg)';

    (If you change the same property twice, you'll only overwrite previous value.)