question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Overriding or adding transform property

See original GitHub issue

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!

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:6
  • Comments:13 (1 by maintainers)

github_iconTop GitHub Comments

7reactions
koutsenkocommented, Jan 17, 2018

Any news?

1reaction
dholakiyaankitcommented, Aug 27, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to mix css3 transform properties without overriding (in ...
Currently there is no way to do this, it only accepts one command for transform at a time and cannot add or subtract...
Read more >
transform - CSS: Cascading Style Sheets - MDN Web Docs
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting ......
Read more >
Finer grained control over CSS transforms with individual ...
To apply transforms to an element, use the CSS transform Property. The property accepts one or more <transform-function> s which get applied ...
Read more >
A Trick: Individual CSS Transform Functions - Dan Wilson
We get a lot of power through the single transform property in CSS ... not just adding the scale on hover… we are...
Read more >
Set transform override values by manipulating objects in the ...
Select the collection for which you want to create an override. · In the collection Property Editor, select Absolute or Relative from the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found