Search the Community
Showing results for tags 'transformorigin rotate'.
Found 2 results
-
Trying to basically "walk" a square across the screen the way you'd tip a heavy box across a room to move it. For it to work, I need to update the transform origin (i.e. rotation point) of the box for each step but since the origin is relative to the original box position, it doesn't quite work. Any thoughts on getting this to work? Currently I'm just using a div but I'm open to SVG solution. -
Hopefully this will be easy. I'm trying to get a 2D square to "roll" into position. Each rotation of 90 degrees will be around its bottom right corner. There will be an image on the face of the square which is not symmetrical, so that has to behave as expected. I've rounded opposite corners in the CodePen example to show this asymmetry. Square1 shows the sort of animation I'm after, but it flicks back to rotation:0 between "rolls", so I can't use this. Square2 is my feeble attempt at changing the transformOrigin, but it doesn't work this way (obviously). How can I change the transformOrigin after each 90 degree rotation, so the next comes from the new bottom right corner? Thanks
