Whence this wobble?

[Shikkediel]

So I’ve been playing around with 3d transforms, making a wheel from 36 elements that are each rotated 10 degrees around the x-axis creating a circle. This is the basic idea from a side view:

The horizontal and vertical translations are calculated with JS, as well as the transform-origin. Looks alright so far but when I try to rotate it, it does not revolve around it’s center somehow. Can’t seem to find the right styling for that.

codepen.io/anon/pen/eyJRVB

Does anybody have a tip where the issue lies? I’m thinking the transform-origin value but no number will make it concentric. Thanks in advance.

[Shikkediel]

Even if I take a screenshot and check the pixel size of the wheel for using a radius value, that doesn’t seem to really match up either. Although the fact that it is about 15 pixels different from the calculated amount should be a serious clue…

It’s probably easiest to see the exact movement when changing the rotateY(-30deg) on #machine > div to -89deg to get an almost full side view.

Hmm… it’s escaping the larger sign in the previous line. But you get the gist.

Edit – I noticed the front and back don’t match up, element-wise. Now thinking it’s an inherent design flaw but not sure how to fix it yet. Should’ve inkscaped more and use less pen and paper:

Update – it’s a “circle” alright, I’m apparently just calculating the centre point incorrectly.

Lol, visualising’s a lot easier when you can actually look at it. I’m concluding it needs both an adjustment for transform-origin depth (z) as well as the y-coordinate.

[Shikkediel]

Double wobble gone. Yay.

codepen.io/anon/pen/XVdMbg

[Shikkediel]

Microsoft party poopers. So the topic’ll make no sense at all if you use their browser.

[Shikkediel]

Rewritten to make all elements themselves rotate around the centre. In order to get closer to an IE compatible version, where they would have to be animated individually instead of applying a rotation to the parent only. My eyes are hurting from staring at trigonometry now.

That said, anybody have an idea why this gets flattened? There are no parent transforms anymore…

codepen.io/anon/pen/WdxJar

I don’t think it matters much for the eventual purpose I had in mind for it but I’m curious nonetheless.

Edit – I realise (now) that a 3d context will only be created when explicitly declared on the parent? Meaning this will never work in IE in a truly multi-dimensional way.

But I’m still wondering why the commented out rule only works when a transform is added, instead of preserve-3d alone.

[Shikkediel]

Guess it just doesn’t work that way. Have to say it’s still a bit limited after all this time, especially when it comes to smoothly displaying the lines as well. But good enough for what I’m up to.

Lol, using absolute positioning would probably have been a lot easier by the way. But then I wouldn’t have had as much of a chance to revisit high school math.

[Shikkediel]

Holy wow, it actually becomes super simple with absolute positioning. Only the rotation angle becomes the variable and merely a tiny bit of sinus calculation for the radius is needed (reinventing the wheel through the ways of the old Greeks, me thinks).

codepen.io/anon/pen/aEmZjd

I think this will be preferred because it will require a lot less calculations when transitioning (as the alternative to rotating the parent).

Edit – one can now click the window to get a rough idea of it.

[Shikkediel]

Would be great if this had a section for a 3d 4×4 matrix as well (although I think I almost get it now):

https://css-tricks.com/get-value-of-css-rotation-through-javascript/

And I suppose there’s some typos in this bit:

var values = tr.split('(')[1],
    values = values.split(')')[0],
    values = values.split(',');

Those commas at the top two lines I reckon should be semicolons… although I’m wondering what technically happens exactly when you declare the same new variable several times like that.

I kinda like this one myself, using a single line (ignore the jQuery):

var tr = el.css('transform'),
values = tr.replace(/[^0-9\-.,]/g, '').split(',');

Coming along alright by the way – wheels are already draggable and will transition at the speed you give them (provided it meets the threshold):

https://codepen.io/Shikkediel/pen/ZvpGzJ

This one’s got 18 sides (each element rotating 20 degrees incrementally) instead of 36.

[Shikkediel]

var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];

var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));

For calculating the rotationX of a 3d matrix, you’d wanna be using the following entries:

if (values.length > 6) var angle = Math.round(Math.atan2(values[6], values[5])*180/Math.PI));
else angle = 0;

This will return an angle between -180 and 180 degrees. Since I’m using all negative angles around a full circle, I’m adding this:

if (angle >= 0) angle -= 360;

[Shikkediel]

I came across a weird glitch in Opera where one of the values would turn out to be 1.22465-16, a very small number I would think but not recognised as such – it would return NaN.

So this is a safer cross browser approach:

if (values.length > 6) var angle = Math.round(Math.atan2(Number(values[6]) || 0, values[5])*180/Math.PI));
else angle = 0;

Edit – I now realise that it’s probably because the regex that is alternatively used strips out the exponential notation (so not necessarily a browser quirk even though it did not occur in FF or IE)…

[Author]

Posts