Menu
How do I retrieve the width and height properties after I've applied transform: rotate(45deg);?
Like, 11x11 square after rotation becomes 17x17 (Chrome result), but javascript still returns original width/height - 10x10.
How do I get this 17x17?
578
The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a <transform-function> data type.
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
You can use the CSS zoom property to scale any HTML element. Note that it does not work in Firefox, you could use -moz-transform: scale(NUMBER); instead (and if you go that route, you can use transform: scale(NUMBER); on all browsers, too).
height = this.GetComponent< RectTransform >().rect.height; ratio = width / height; Everything works correctly until the elements are inside a panel with a vertical/horizontal layout component. Then even though the rect transform of the elements shows the correct values (grayed out), the above code returns zero for both width and height.
The height of an element is one CSS property that often needs to be transitioned. Sometimes, we want a part of an element to be collapsed until it is needed. That is, when a button is clicked, the height of an element increases or decreases. See more buttons and bootstrap panels make use of this technique.
The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling: .element { width: 20px; height: 20px; transform: scale(20); }. Even with a declared height and width, this element will now be scaled to twenty times its original size:
When transitioning height, the DOM has to re-flow (or re-layout) all affected elements. This is computationally expensive considering transitions attempt to animate at 60fps. That's 60 recalculations per second! With translate, you're only affecting the element's appearance.
Instead of calculating it yourself, you can get this via the HTMLDOMElement's getBoundingClientRect().
This will return an object with the correct height and width, taking into account the transformation matrix.
jsFiddle.
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
