I've a div element which contains three child div's as inline-block display property. I'm applying a rotation transformation with transform: rotate(15deg) and the div is rotated. Obiviously all the inner divs are also go along with the parent.
But once the rotation is completed, I want to uncover all the inner elements and they should be at their last position.
How can we get their actual transform origin, rotation and positions.
I tried using window.getComputedStyle but not finding any hint in that.
Here is the codepen
Related
I want to move my relative image's coordinate dynamically to get moved to a fixed pointer's coordinate which is absolute to it
If your elements are in a parent-child relationship, simply use CSS: position:absolute on the child. If they aren't in a relationship: You can use .getBoundingClientRect() on the element that you want to position your second element relative to:
let rect = yourPointerElement.getBoundingClientRect();
rect is an object that holds several information regarding the current position and boundaries, including:
{ x, y, width, height, top, right, bottom, left } in pixels.
You can now use this information to position your second element relative to it, using CSS (i.E. position:fixed) and changing top/bottom/left/right with JS.
I'm wondering if there is a way to Rotate SVG (not its elements) or apply a transformation, which has a rotation angle?
Basically what I want to do is to have TWO (probably nested) elements in the screen: container and image, where the image won't be visible out of container boundaries. Kind of Overflow hidden....
Any idea?
Tnx
Put the svg inside a div or figure then give that a class like rotate, use
.rotate {
transform: rotateZ(50deg);
}
in your CSS
I'm hoping someone can help me out with this, I'm using a jquery plugin (jquery rotate) to rotate some elements inside a container, however a new crazy requirement came up and now I also need to rotate the container div, the problem is the children elements can be dragged and dropped inside this container and when it is rotated dragging stops working and it starts acting weird (I guess it makes sense as the coordinates system is being altered by the rotation on the container so the dragging behavior just goes crazy) so the only way that I can see to keep dragging and dropping working is to "simulate" the parent rotation by somehow calculate what the position of the children elements would be if the parent is rotated (without actually rotating the parent container) and position each child element on its corresponding final position, this way the coordinates system does not get "broken" and the drag and drop of the children remains working as expected.
To clarify what I'm trying to achieve lets suppose the container is 400x400px and that it has a children at top=0 and left=0, I would like to perform a "fake" 180 degrees rotation on the container that would send the child element to top=400px and left=400px (which is where the child element would visually end up being if the parent is rotated), I'm hoping there is a library I can use to perform this math (math is not my thing though) on each children and somehow "calculate" or "determine" the position they should have within the container if it is rotated 180 degrees and then position each children where they should be (the container rotation will always be a 180 degrees rotation which means it will be either at a "normal" angle of 0 degrees or a "flipped" angle of 180 degrees).
Any help would be greatly appreciated.
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...
Let's say i have a div element which opacity is set to 0.5 .
I have a script which function is to draw a rectangle over the div based on the first time the user clicks with the left mouse button on the div element and the way he drags the mouse over the div.
I am trying to figure out how to make the rectangle the user draws to not be affected by the opacity of the div container element.
For example if you upload a photo to google+ there is an option to crop some part of the image so only your face is visible. Thay have this kind of functionality i am looking for. When you draw the part over the image you'd like to crop the image opacity is set to 0.5 for example but the region you are drawing is clearly showing the original style of the image.
the opacity of a wrapping element is inherited by all containing elements,
you could simply solve this by creating a png-image with your desired opacity with size 1x1px and make this as background-image and repeat x and y
I think what you are trying to do is called masking, it can be achieved atleast with svg. You could have one layer with specific opacity and a mask with the rectangle properties to "burn a hole" in the opacity at a desired location.
Take a look at this:
http://www.html5rocks.com/en/tutorials/masking/adobe/#toc-the-mask-property