Css3 2d transforms

  -  

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

Bạn đang xem: Css3 2d transforms

.element transform: rotate(360deg); transform-origin: đứng đầu left;As indicated above, the transform-origin property can take up lớn two space-separated keyword or length values for a 2 chiều transform & up to lớn three values for a 3d transform.

Using the code above on a 200px by 200px box, with the transform applied to a transitioned using a click event, would behave lượt thích this:


By default, the origin of a transform is “50% 50%”, which is exactly in the center of any given element. Changing the origin khổng lồ “top left” (as in the thử nghiệm above) causes the element lớn use the vị trí cao nhất left corner of the element as a rotation point.

Values can be lengths, percentages or the keyword top, left, right, bottom, và center.

Xem thêm: ▷ Cách Bật Cookie Và Ssl Trong Trình Duyệt Của Tôi, Bật Cookie Trong Trình Duyệt Truy Cập Internet

The first value is the horizontal position, the second value is the vertical, và the third value represents the position on the Z axis. The third value will only work if you are using 3d transforms, & it cannot be a percentage.


Browser support

IEEdgeFirefoxChromeSafariOpera
9+All3.5+AllAll11.5+
Android ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera Mobile
AllAll91+AllAll
Source: caniuse

Related properties


*
*
Chris Coyier
*
*
Chris Coyier
*
*
Sara Cope
*
*
Chris Coyier

Hi. I’m wondering if this might be a way solve an issue I’m having.

I’ve used transform: scale(.5,.5); but my margins behave as though the thành công has not been scaled. When I resize the browser, the left margin cause the chiến thắng to push away from the edge. When I inspect elements và turn off the transform, I can see that the thành quả is reacting to the original form size (pre-transform).

Xem thêm: Hướng Dẫn Cách Lấy Css Của 1 Trang Web Mới Nhất 2020, Chi Tiết Cách Lấy Source Code Html Mới Nhất 2020

Is there a way lớn use transform-origin lớn correct this? I tried transform-origin: 25%50%; however the problem persists, just at different proportions.