CSS Rotation with Respect to a Reference Point

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).

rotate a html element around a point

You can use transform origin:

https://developer.mozilla.org/En/CSS/-moz-transform-origin

as mentioned here:

CSS rotation with respect to a reference point

CSS positioning absolute With point of reference

You should just be able to use left:100% on your absolute positioned span element. I think this is the result you wanted. Also, I fixed your HTML by adding the closing tag for the first <span> element.

#main {

  position: relative;

  display: inline-block;

}

#sub {

  position: absolute;

  bottom: 0;

  min-width: fit-content;

  left: 100%;

  background-color: orange;

}

<div id="main">

  <span>hello everyone.</span>

  <span id="sub">-Name</span>

</div>

CSS : Change angle of rotation of needle

One solution I found is that transform: rotate(0deg); start from -180deg and keep adding my value to -180deg. Needle will move from bottom to top. For example, I want to rotate needle by 60deg. I will do: -180-60 = -240

This is work around.

css3 where is the point of reference rotate() uses?

rotate(angle) does not append angle to rotation, but rotates the element to angle. So in ":hover" css, you have to give like

rotate(156.5deg);

Instead of translating, you can use transform-origin property in css.

hope this is what you want to achieve : http://jsfiddle.net/diode/QGE7F/9/

Position div with center as reference point?

How about this? Compare these two fiddles using the CSS below fiddle1 & fiddle2

HTML

<div id="parent">
    <div id="anchor">
        <div id="child">
            <h1>Some text</h1>
        </div>
    </div>
</div>

CSS

#parent {
    position: relative;
    width: 100%;
    height: 100%;
}
#anchor {
    position: absolute;
    right: 33%;
    bottom: 33%;
}
#child {
    padding: 10px;
    margin-right: -50%;
    float: right;
}

CSS rotation behaves different than PHP

In PHP image rotation rotates anticlockwise (or counterclockwise)

Rotation angle, in degrees. The rotation angle is interpreted as the number of degrees to rotate the image anticlockwise

In CSS it is rotated clockwise. Hence the difference

CSS Rotation & IE: absolute positioning seems to break IE

This sounds like an issue I spent a good deal of time with. I left two comments on Paul Irish's blog post detailing my findings. Here is what I wrote:

IE6 and 7: You must declare at least
height or width on the div that's
going to be be rotated BEFORE your
rotation filters appear in the CSS.
Even if you do this, however, any
styles applied to that div AFTER the
rotation filters appear in the code
will not be applied. The same seems to
be true for any styles applied to that
div's children as well. Weird.

IE8: This seems to not be a problem. I
successfully applied styles to the div
(including declaring its height or
width for the first time) after the
rotation filters appear in the code.

...and more CSS rotation weirdness to report:

In IE6 and 7, even if you follow the
rules I posted a few comments back,
you will still totally break your site
if you use more than one rotation
filter per external CSS file. You
either have to have separate CSS files
per rotation filter, or simply add
each filter nested in its own unique
style tags in the head of your html.
Failure to do so will only display the
first rotated object, but even this
will be blurry and at the incorrect
angle.

Hilariously, removing the DOCTYPE
causes all the rotation to render
perfectly, so I'm assuming quirks mode
knows how to handle multiple rotation
filters? Also, with a larger, more
complex stylesheet, there were even
weirder side effects, but I couldn't
pinpoint what was causing those.
Anyways…

Take home message:

Use only 1 proprietary ms filter:
(when used for rotation, at least) per
external stylesheet. and.. Each
rotation filter in your html must be
in its own set of style tags.

Even though my issue was slightly different, you may be running into a similar situation with the two inner divs being rotated by the parent. It's worth a shot. At least try moving the .rotate delclaration to the bottom of the stylesheet.

---

Related Topics