CODEWITHSUNDEEP
javascriptcsstransformtween
RickyHalim
RickyHalim

Reputation: 295

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?

Upvotes: 0

Views: 970

Answers (1)

ippi
ippi

Reputation: 10167

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.)

Upvotes: 2

Related Questions