How to Set the Transform Origin to a Specific Point on the Element

How to set the transform origin to a specific point on the element?

To make the transform-origin point relative to the element, you need to use transform-box: fill-box;.

Chrome doesn't support that property yet (CSS transform-box - Chrome Platform Status), but luckily (yet wrongfully) Chrome sets the transform-origin relative to the element if you use percentages instead of pixels (https://css-tricks.com/transforms-on-svg-elements/).

So, to make something that works on most *) modern browsers, use transform-box: fill-box; and transform-origin: xx% yy%;

.hammer-icon {
    transform-origin: 15% 80%;
    transform-box: fill-box;
    ...
}

https://jsfiddle.net/L1790vzo/8

*) IE/Edge doesn't support CSS transforms on SVG elements at all.
*) Proper support in Chrome v64 and Opera v51

CSS use transform-origin to position a rotated element

One method to achieve the expected output would be to do the following:

• Put the button within div2 and position it at the right edge.
• Absolutely position the div2 at the bottom of the parent container.
• Rotate the div2 in counter clockwise direction (-90deg) with the transform origin at left bottom.
• After rotation, the div2 would entirely go outside of the container and hence we need to add an extra translateY(100%) to the transform stack.
• The text is aligned to the right and an extra padding-right (greater than the width of the button) is added to keep the text away from the button.
• The button would also get rotated by -90 degree because it is a child of div2 and to counter that (that is to make the button text get displayed properly), we need to apply counter rotation.

Now, in this approach the only drawback is that if the text length increases beyond what can be fit in a single line then it would wrap around to the next line (have a look at the second sample in snippet).

.div1 {  position: relative;  height: 120px;  width: 120px;  float: left;  margin: 20px;  border: solid 1px #000;  overflow: hidden;}button {  position: absolute;  display: inline-block;  bottom: 0;  right: 0;  width: 48px;  height: 48px;  border: 0;  margin: 0;  padding: 0;  transform: rotate(90deg);}.div2 {  position: absolute;  box-sizing: border-box;  bottom: 0px;  height: 48px;  width: 100%;  padding-right: 60px;  line-height: 48px;  background-color: #999;  text-align: right;  transform: rotate(-90deg) translateY(100%);  transform-origin: left bottom;}

<div class="div1">  <div class="div2">HELLO    <button>></button>  </div></div>
<div class="div1">  <div class="div2">HELLO WORLD!!!!!    <button>></button>  </div></div>

CSS rotation with respect to a reference point

You could use transform-origin.
It defines the point to rotate around from the upper left corner of the element.

transform-origin: 0% 0%

This would rotate around the upper left corner.

For other options look here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

for the safer side if this link not available then here are a couple of more options

transform-origin: center; // one of the keywords left, center, right, top, and bottom

transform-origin: top left; // same way can use two keywords

transform-origin: 50px 50px; // specific x-offset | y-offset

transform-origin: bottom right 60px; // third part is for 3D transform : z-offset

As far as I know there isn't an option to rotate around a fixed point (although this would be handy).

How to correctly set transform-origin to create a perfect X symbol?

No need transform-origin and extra element, you can simply do it with one element and a gradient for each line:

.circle {  width:50px;  height:50px;  border-radius:50%;  background:    /*horizontal line centred [width=100% and height=5px]*/    linear-gradient(#fff,#fff) center/100% 5px,    /*Vertical line centred [width=5px and height=100%]*/    linear-gradient(#fff,#fff) center/5px 100%,     /*black background color*/    #000;  background-repeat:no-repeat;  transform:rotate(45deg);}

<div class="circle"></div>

How to set transform origin in SVG

To rotate use transform="rotate(deg, cx, cy)", where deg is the degree you want to rotate and (cx, cy) define the centre of rotation.

For scaling/resizing, you have to translate by (-cx, -cy), then scale and then translate back to (cx, cy). You can do this with a matrix transform:

transform="matrix(sx, 0, 0, sy, cx-sx*cx, cy-sy*cy)"

Where sx is the scaling factor in the x-axis, sy in the y-axis.

How to set transform origin point of a svg element in the group?

Looks like I found the simple solution for setting up the center point for group element in the SVG. It was very simple.

.top {transform-origin: 50% 50%;}  

---

Related Topics