Overriding or adding transform property

[ghost]

Hi team I'm using react-rnd version [latest]

My question: is there any way to add css transform of RND component using style property?

Example code:

render() {
 const styleRnd = {
                border:'2px solid',
                willChange: 'transform',
                transform: this.data.style.transform,
            };

return (
                    <Rnd style={styleRnd}
                        default={{
                            x: 0,
                            y:0
                        }}
                        size={{
                            width: '100',
                            height: '100'
                        }}
                      >
                           <div>test</div>
                       </Rnd>
}

I need this because, I'm trying to add Rotation capabilites to RND component using CSS transform: rotate()

https://www.webpackbin.com/bins/-KuQ4kQj4Os2k9glctKz

Thanks!

[bokuweb]

@diegoclerici Thanks for your report :) Hmm, It is a difficult issue, transform property is overwritten by react-draggable.I will think about it.

Probably we need to fix react-draggable so that transform will not be overwritten

[koutsenko]

Any news?

[linux019]

Reproduced project

https://codesandbox.io/s/3qyjyy1v3p

[Aquarius-Sally]

Any news?

[Aquarius-Sally]

+1

[dholakiyaankit]

Any updates on this? I need to use transform to provide support for rotate.

[makis-spy]

+1

[Hello-Tan]

+1

[LisaKr]

+1

[kele5240]

+1

[aktn]

+1

[olihou]

+1

[Muhammad-Hammad]

+1 did anyone found a work around?

[vishwalogicwind]

+1 Any update on this.

[egemenzeytinci]

+1 Any update on this?

[EzioAuditoly]

+1

[hdale94]

To override the transform property, you can use the className-prop to set a custom class, and then set the important flag on the transform property.

Example:

<Rnd
className="react-draggable-overwrite"
/>

In a CSS-file:

.react-draggable-overwrite {
  transform: translate(0px, 0px) !important;
}

[LorenzoElenkov]

To override the transform property, you can use the className-prop to set a custom class, and then set the important flag on the transform property.

Example:

<Rnd
className="react-draggable-overwrite"
/>

In a CSS-file:

.react-draggable-overwrite {
  transform: translate(0px, 0px) !important;
}

Sure but you still need to keep the translate(x, y) position and not overwrite it with zero-values.

[Liri-s29]

@bokuweb Please let us know if there is any update on this.