CODEWITHSUNDEEP
javascriptcsstransform
Dinkheller
Dinkheller

Reputation: 5074

css3 Transform: rotate moves the view

I am currently trying to move the view in a pseudo 3D environment. So I started with some divs and even got a first - lets call it room.

But now when I rotate, the view not only rotates, but also moves. that makes it pretty hard to calculate at which position in the 3D real you are.

Any idea how to solve this.

Here is a fiddle:

http://jsfiddle.net/torsten/HHQCg/

and here is how I add the transformation to the div:

document.getElementById('world').style.webkitTransform = "translate3d(0px, 0px, 0px) rotateY(45deg)";

Upvotes: 0

Views: 145

Answers (1)

Steve Wellens
Steve Wellens

Reputation: 20638

Perhaps it's the order of the transforms.

Try rotating first:

function updateMap() {
    //alert(mapPos.rotate);
    document.getElementById('world').style.webkitTransform = "rotateY(" + mapPos.rotate + "deg) translate3d(" + mapPos.x +"px, " + mapPos.y + "px, " + mapPos.z + "px) ";
}

Upvotes: 1

Related Questions