+ 3
transform: translate()
https://developer.mozilla.org/en-US/docs/Web/CSS/translate
+ 4
if you want something similar to scale(x ,y) or scaleX(x) or scaleY(y), you can try:
transform: translate(5px, 5px);
or translateX, translateY for axis specific positioning.
+ 4
Arjun Dawande , yes Bob_Li and Lisa you're right, translate is used for this:
transform: translateX(50px);
+ 3
position: relative;
left: 50px;
top: 75px;
There are also many other ways, this is the most direct how you can specify the position, relative to the container (parent) element.
https://sololearn.com/compiler-playground/WEAkRVCqgU7T/?ref=app
+ 3
This IS the way. There is no universal center of reference, the point of x=0 and y=0 is always the top left corner of the parent element.
If you want to draw in a fixed coordinate system, then try canvas. But you will need to learn some javascript to use it.
Keep in mind, that a website can be opened in many types of devices - pc, phone, tablet with different resolutions, and even the user can resize the browser window. So responsive web design rarely uses pixel coordinates these days.
+ 1
Arjun Dawande scaleX() does not set the position of the object, but changes the size of its width, for example, transform: scaleX(2); will double the width of the object.
+ 1
In CSS, you typically use the "top" and "left" properties to change an element's position using the y-axis and x-axis respectively. Let's go through a brief explanation of how you can change an element's position using the x and y-axis in CSS.
Changing an Element's Position Using the X and Y Axis:
Using the top Property (Y-Axis):
- The top property is used to specify the top position of a positioned element.
- It positions the element relative to the top edge of the containing element or a positioned ancestor.
Using the left Property (X-Axis):
- The left property is used to specify the left position of a positioned element.
- It positions the element relative to the left edge of the containing element or a positioned ancestor.