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.

[Transforms] transform-origin support

See original GitHub issue

Do Views have an equivalent of the CSS property transform-origin?

Issue Analytics

State:
Created 8 years ago
Reactions:30
Comments:64 (14 by maintainers)

Top GitHub Comments

20reactions

jmurzycommented, May 8, 2017

In case anyone else is interested, I wrote up a blog post about implementing transform-origin in React Native using matrix transformations:

https://commitocracy.com/implementing-foldview-in-react-native-e970011f98b8

🍺

10reactions

lelandrichardsoncommented, May 30, 2016

@alexHlebnikov transform origin is implemented as a matrix transformation by a translation matrix to the resulting transform matrix. You can implement this currently by setting the transformMatrix style property, instead of the transform property, and doing the matrix operations yourself. If your transform is simple, this will likely end up as a fairly simple array of 16 numbers, some of which you will need to multiply appropriately from what you are using currently. Looking at the code in #2106 might help give you some context.

I talked to @vjeux about this PR some time ago and he seemed to agree that we could merge it in despite the difference from the web spec. If I get some time, I may try to revive the PR…

Top Results From Across the Web

transform-origin - CSS: Cascading Style Sheets | MDN

The transform origin is the point around which a transformation is applied. For example, the transform origin of the rotate() function is ...

CSS transform-origin property - W3Schools

The transform-origin property allows you to change the position of transformed elements. 2D transformations can change the x- and y-axis of an element....

"transform-origin" | Can I use... Support tables for ... - CanIUse

Method of transforming an element in the third dimension using the transform property. Includes support for the perspective property to set the ...

transform-origin - CSS-Tricks

The transform-origin property is used in conjunction with CSS transforms, letting you change the point of origin of a transform.

CSS transform-origin Property - Dofactory

The transform-origin property defines the origin of the transformation. The origin is the reference point for the transformation calculations.