There seems to be a bug with the 3D Rotate Function on the styles panel.
Assigning my div a rotateZ deg value and also a scale value, the rotate value gets cancelled.
- I set a div with a rotateZ value of 45 deg with XY as 0 deg and scale3D value of (1, 0, 1) as the initial state of the div before hovered (initial state)
- With WF interactions ... I set it to scale back to normal at (1, 1, 1) but staying at 45 deg when div is hovered
Problem is after setting all values, when I hovered the div, the inital state indicates that only the scale3d value was set but the rotate3d was not because it would scale back to 1 with no angle and rotate to 45deg with interactions when it should have already been set to 45deg.
I took a look at the source code with Chrome inspector tools to figure out what was wrong and I noticed this is what I had set for the div before it's hovered:
transform: rotate(45deg) scale3d(1, 0, 1);
The rotate is just a normal rotate and not rotateZ, which I find weird ... might this be the bug? Even if so, it should still rotate the div in 2D but it does not, therefore I can't seem to find what might the issue be.
Please look into this and if it is my mistake feel free to let me know ... I have been doing something wrong.
Note: There is no problem when I use the hack, where:
Step1: I set initial scale3d and rotate3d in the interactions panel with 0ms transition time, so users won't be able to see the div get ready.
Step2: Set it to scale back up, this time with 500ms ease.
Thus, it creates the same effect.