RotateZ on Styles Panel

Community resources Bugs
1

Hi Webflow,

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.

For example:

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

Cheers Diana.

2

Please include a public share link when reporting a bug:

3

Hey @DesignerDiana could you please update your post with some more information so we can help you faster? Things like your read-only link & screenshots really help us to help you faster :slight_smile:

How to share a read-only link:

When I was taking a stab at re-creating this, I noticed that you have your scale set to 1,0,1 in your styles which if i interpret that correctly, it would essentially make the element not display (as it doesn’t have a height nor an element to represent the face it’s being scaled to).

Is this how you have the styles set on the element? When I used the interactions panel I was only able to get the Y-scale value to be “0.01” as the smallest value. Thank you so much for bringing this to our attention! I hope I can be of more assistance soon once we can see the element in the environment you’re working in. :slight_smile:

4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.