I am using webkit-transform: scale(zoomFactor,zoomFactor) in css to zoom the contents of an iframe. When I zoom it to the proper size to fit inside the iframe, the positioning of the elements is offset like this:
I cannot figure out how to find the x and y I would need to offset it to get it so that the contents of the iframe appear to be in the same corner as before it was scaled. The amount the contents are offset depend on how large or small the scalefactor is. Does anyone know how I can get this to work?
by using transforms you can set the transform origin.
In your case you want to scale to the top left.
so the origin should not be default (center) but at 0px left and 0px top.
-webkit-transform-origin:0px 0px;
Related
I want to use CSS transforms to do some layouts of images, and have the image layouts be consistent across different screen widths. (For the purposes of this post, I’m only going to discuss widths and x (left) values.) All the data that I need to do these layouts are in a database.
Of course, if I could do an HTML layout with dedicated styles for each layout, I’d be fine. I could do it like I have it here in this pen. There are three boxes, 2 smaller ones and a larger one that is 3 times the size of the smaller ones. The smaller boxes are each 10% of the window width, the larger one is 30%. The boxes are equally spaced, the left-most one is 10% from the left, the larger middle one is 30% from the left and the last one is 70% from the left. This leaves an equal amount of space ( 10% ) between the boxes.
img#smallA { /* CSS for the first box */
position: absolute;
top: 10%;
left: 10%;
width: 10%;
}
The spacing is uniform when using CSS only.
On the above pen that uses CSS only, you can resize the window width all you want and the sizing and spacing stays consistent; proportional to the screen width, just as we have coded it to do.
So it seems logical that one should be able to do the same thing with a transform. You can get the window width with JS, you can set the width of the boxes with the transform and you can set the x values with the transform. But here’s the pen where I’ve tried to do it. Click the larger box to run the sizeAndPos() function. Now if you resize the window width to 1000 pixels (watch the little gizmo in the center of the CodePen screen), this JS / transform method works perfectly and the layout looks like the other one. But if you stretch it, the spacing starts going off immediately. (Remember to click the larger box after resizing). I think the reason it works at 1000 pixels wide, is b/c at that window width, the boxes are at their natural width. But I don’t understand why it only works in that case.
The spacing is off now; the between gap box 2 and 3 is too big.
For anybody how looks at the code, you may wonder why I’m passing the original width of each image (origWidth) to the function. This is because the CSS scale transform function sizes the image based on it’s original dimensions (scaling an image to 1 gives you 100% of the original size). So to do a proportional size, you first have to figure out how many pixels wide the box should be (10% or 30% of the screen width, depending on the box). Then you have to divide that amount by the original size to get the proper ratio to do the scaling. The small boxes are 100 pixels wide and the large one is 300 pixels wide.
Surely this is possible with transforms. I have tried setting the transform properties individually, to control the order of the operations, but it didn’t help. Can anyone tell me why this doesn’t work?
After trying to make this way too complicated, I found the answer. Change the transform-origin property of the elements. The default on this property is 'center' both axis. But we need our transformations to originate from the top left corner.
img#smallA {
transform-origin: left top;
position: absolute;
}
I'm new to SVG and I'm having trouble solving this problem :
I'm trying to create a system of points, rotating around a single axis, like a solar system.
The center point is a round div, placed to the center of the viewport with the help of the CSS calc function :
left: calc(50% - myDivWidth/2);
top: calc(50% - myDivHeight/2);
I placed SVG circles around this central point with the "cx" and "cy" attributes and everything works fine.
Here's the problem : when I resize the window, the div is automatically moved to stay at the center of the screen. But my SVG circles are not moving because the coordinate system doesn't stretch to the new size of the viewport. Now if I reload the page after resizing, everything is placed correctly again.
I thought I could recalculate the coordinates of my circles when a resize occurs but isn't it a bit heavy ?
All my circles are placed in a svg tag with a 100% height and width.
I hope you can help me with this ! Thanks !
If you add a viewBox attribute to your SVG, it will automatically be scaled to fit it's parent viewport (<div class="univers">).
<svg width="100%" height="100%" viewBox="-315 -315 630 630">
With this viewBox you can use (0,0) as the origin for your orbiting circles.
Demo here
I have a few DIVs (can be images too) elements with absolute position and rotated and scaled using CSS.
How can I calculate the total width and height that the element occupy (the rectangle around then). Checking the offset() of position() doesn't give me the right results.
I need a solution in Javascript/Jquery if possible, or the Math so I can calculate it myself if there isn't any other options. Thanks.
What I've tried:
use offset, but it doesn't give me the right point
position(), but it doesn't take the rotation into account
CSS of an elements for example:
position:absolute;
-webkit-transform: rotate(-280deg);
-webkit-transform-origin: 43px 33px;
getBoundingClientRect() will be able to give you the position and dimensions of each of your elements, after any CSS transforms are applied to them.
From there, it's a matter of figuring out the total height (subtracting the minimum top from the maximum bottom) and width (subtracting the minimum left from maximum `right).
Here's a fiddle example and here's a semi-related question that should get you started.
I have a parent div and child div. Child is position absolute with respect to parent div. Child div is rotated by 90 degrees. Since the origin is the center (meeting point of 2 diagonals) of the child, the child div is shifted pixels outside of the container.
To elaborate this problem I have added 2 parents-child output in the fiddle below.
http://jsfiddle.net/Xja29/
In the fiddle I have added an event which resets the child position to the top-left corner of their respective parents. Here is the reset code. Note top & left values are different for the 2 child divs
JQuery Code:
$("#link").click(function(){
//Child 1 needs top=45 and left=-45
$("#c1").css({"top":"45px", "left":"-45px"});
//Whereas Child 2 needs top=30 and left=-30
$("#c2").css({"top":"25px", "left":"-25px"});
//As one can see there are different values for top and left for childs of different dimension. Is there any relation or formula to find out this values?
});
Exactly, I want to find out the relation between rotation angle, width, height and co-ordinate system of the child div. Please let me know if anything such exists. Thank you.
You can use as style:
transform: rotate(90deg) translate(0,-100%)
transform-origin: top left
to get the requested alignment without using Javascript
You can always use the following calculation:
top = (child_div.width - child_div.height)/2
left = (child_div.height - child_div.width)/2 = -top
Let's examine the formula for top. The center of the child div is (child_div.height/2) units below the top of the parent's div. After rotating the child div, its top is (child_div.width/2) units above its own center. This implies that its top is (child_div.width/2) - (child_div.width/2) units above its parent's top. Simplifying it, we get the aforesaid formula. The formula for left can be derived analogously.
If you are going to move them using Javascript, you can calculate these values at the run time and use them.
Well, the child div resides in its own coordinate system relative to the parent container which position' is not static (the body otherwise). If you want to rotate a div around a certain point, which is not the origin of its coordinate system the steps to be taken are as follows:
subtract the vetor of the rotation point from the position vector of the div. (so the rotation center will lie in the origin).
rotate the div.
undo step one by adding the "rotation-center-vector" to the position of the div.
These steps are a quite general approach and a common concept, just have a look at tranformation matrices. In other words, rotating arround a certain point always involves these three steps (the same holds true for scaling objects).
Good luck...
Problem is in title. It used to do it on the odd occasion. Then i added the jQuery rotate.js plugin to spin my heading 360 degrees and now it is constantly placed to the right of where it should be. It may be interesting to note that i got the offset of the canvas with
var rect = gameController.canvas.getBoundingClientRect();
var offset = {
x: rect.left,
y: rect.top
};
And that still has coordinates of 0,0 in the top left corner of where it should be ( which is correct and how it should be when the canvas has not moved).
#canvas {
z-index: 1;
position: absolute;
margin-top: 52px;
margin-left: 44px;
background-image:url(images/background.jpg);
}
If the position is absolute, it is removed from the document and nothing will make it move. Strange.
getBoundingClientRect() returns the sum of the canvas and its css border-boxes.
Maybe check the canvas with getClientRects() to see exactly where it is.
I'm not sure why it moved, i probably have a css error somewhere..but i had my canvas as position absolute, relative to a div that it was inside. I placed my canvas right at the top of the body tag so it was absolute, relative to the whole page, then changed the placement of it with top and bottom to get it correct. Now nothing will move it. It works fine with the rotate.js plugin. Thanks for having a look at my question.