Menu
I am trying to scale my entire page from the top left. This is what my original page looks like:
However when I try to scale my page, this happens:
This is my CSS:
html { zoom: 1.4; /* Old IE only */ -moz-transform: scale(1.4); -webkit-transform: scale(1.4); transform: scale(1.4); transform-origin: top left; } What am I doing wrong? It cuts off part of my page.
446
CSS Demo: transform-origin The transform origin is the point around which a transformation is applied. For example, the transform origin of the rotate() function is the center of rotation.
scale() 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.
Just replace width: 400px; with transform: scale(2,2) on :hover . transform-origin: center; ? @oCcSking it is the default value Default value: 50% 50% 0 as in Specifications developer.mozilla.org/en-US/docs/Web/CSS/transform-origin Initial value 50% 50% 0 .
A CSS scale () function is defined as a CSS Transformation property which allows resizing an element in the Two-dimensional Plane. It is used to increase or decrease the size of an element. When a scale transformation is applied it is necessary to instruct the browser about the numbers to resize.
If position: absolute; or position: fixed; - the left property sets the left edge of an element to a unit to the left of the left edge of its nearest positioned ancestor. If position: relative; - the left property sets the left edge of an element to a unit to the left/right of its normal position.
CSS Layout - The position Property. ❮ Previous Next ❯. The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky). The position property specifies the type of positioning method used for an element.
Definition and Usage. The left property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.
I was able to "solve" my problem.
This is what I tried:
In the CSS shown in the question, I changed html to body:
body { zoom: 1.4; /* Old IE only */ -moz-transform: scale(1.4); -webkit-transform: scale(1.4); transform: scale(1.4); transform-origin: top center; margin-top: 5px; } I changed transform-origin: top left to transform-origin: top center.
This fixed the problem partly as it centered to page nicely.
However, part of the top page still isn't displayed correctly. To fix this I added a margin-top to my body.
74
I know this question is 3 years old but I just stumbled on it. The reason your transform is not positioned correctly is because your transform-origin parameters are backwards and thus are ignored. It's "transform-origin: x-axis y-axis" so you should have "transform-origin: left top", not "transform-origin: top left".
20
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
