Position AFTER transform in CSS?

css transform-origin generator
transform-origin css
transform css
css transform: translate
css transform animation
transform-origin css default value
svg transform-origin
css transform: scale

Consider the following attempt to rotate a paragraph 90 degrees and position it so that the corner that was initially its top-left corner (and which therefore becomes its top-right corner after the rotation) ends up located at the top-right corner of the parent block.

HTML:

<!DOCTYPE html>
<html>
<body>
  <div id="outer">
    <p id="text">Foo bar</p>
  </div>
</body>
</html>

CSS:

#outer {
    border: solid 1px red;
    width:600px;
    height: 600px;
    position: relative;
}

#text {
        transform: rotate(90deg); 
        position: absolute;
        top: 0;
        right: 0;
}

In Firefox 19.0.2 on OS X 10.6.8, it fails. This appears to be because, despite the order in which the CSS properties were given, the transformation is applied after the positioning. In other words, the browser:

  1. places #text such that its top-right corner is located at the top-right corner of the parent block, but only then
  2. rotates it, with the result that what is now its top-right corner is not located at the top-right corner of the parent block.

As a result, the transform-origin property isn't much use here. If, for instance, one used transform-origin: top right; then #text would need to be moved downwards by the width it had before it was rotated.

My question: is there a way to tell the browser to apply the CSS positioning properties after the rotation; and if not, then is there instead a way to move #text downwards (e.g. using top:) by the width it had before it was rotated?

NB. Ideally the solution should not require setting a fixed width: for #text, and must not require JavaScript.

You can apply more than one transform to an element, and the order does matter. This is the simplest solution: http://jsfiddle.net/aNscn/41/

#outer {
    border: solid 1px red;
    width:600px;
    height: 600px;
    position: relative;
}

#text {
    background: lightBlue;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    transform: translate(100%) rotate(90deg);
    transform-origin: left top;

    -webkit-transform: translate(100%) rotate(90deg);
    -webkit-transform-origin: left top;
}

transform-origin, The transform-origin property is used in conjunction with CSS value is the vertical, and the third value represents the position on the Z axis. By modifying the coordinate space, CSS transforms change the shape and position of the affected content without disrupting the normal document flow. This guide provides an introduction to using transforms. CSS transforms are implemented using a set of CSS properties that let you apply affine linear transformations to HTML elements.

Rotating -90deg.

 .rotate {
        position:absolute;
       -webkit-transform-origin: left top;   
        /* Safari */
        -webkit-transform: rotate(-90deg) translateX(-100%);

        /* Firefox */
        -moz-transform: rotate(-90deg) translateX(-100%);

        /* IE */
        -ms-transform: rotate(-90deg) translateX(-100%);

        /* Opera */
        -o-transform: rotate(-90deg) translateX(-100%);
   }

CSS transform-origin property, The transform-origin property allows you to change the position of transformed elements. 2D transformations can change the x- and y-axis of an element. The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements. To better understand the transform property, view a demo.

Solved: here

This is the code I've added:

left: 100%;
width: 100%;
-webkit-transform-origin: left top;

I've also added some prefixed transform properties so it will be cross browser

-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);

How I did it:

I've found this question and, as the name of the website says, "fiddled" with the code to obtain this behavior. I guess the solution is left: 100%; instead of right: 0;.

(the width: 100%; is there because for some reason it wasn't 100% and the text would overflow to the next line)

transform-origin, The transform-origin CSS property sets the origin for an element's transformations. PM until no later than 4:00 PM Pacific (in UTC, Wednesday June 10, For example, the transformation origin of the rotate() function is the  With the CSS transform property you can rotate, move, skew, and scale elements. (This post will only cover 2D transforms, but stay tuned for future blog posts on 3D transforms.) Transforms are triggered when an element changes states, such as on mouse-hover or mouse-click. The examples in this post will demonstrate transforms on mouse-hover.

You might want to play around with the translate option which you can apply as the second transform function after rotate and place your element at the exact position that you want to. There is no other way I guess to tell the browser to use the position properties after the transform function is used using plain css.

See this demo - http://codepen.io/anon/pen/klImq

rotate(), The rotate() CSS function defines a transformation that rotates an element div { position: absolute; left: 40px; top: 40px; width: 100px; height:  CSS 2D Transforms. CSS transforms allow you to move, rotate, scale, and skew elements. Mouse over the element below to see a 2D transformation:

You may want to try using CSS3 @keyframes animation. It will allow you to rotate and reposition in any order you like. Here is a tutorial that may help: [CSS-Tricks][1]

.container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
p {
  border: 1px solid blue;
  position: absolute;
  top: auto;
  right: 0;
  display: inline-block;
  margin: 0;
  animation: 1s rotate 1s both;
}
@keyframes rotate {
  0% {
    transform-origin: top left;
    transform: rotate(0deg);
    right:0;
  }
  50% {
    right:0;
  }
  100% {
    transform-origin: top left;
    transform: rotate(90deg);
    right: -64px;
  }
}
<div class="container">
  <p>some text</p>
</div>

CSS transform-origin property, The transform-origin property allows you to change the position of transformed elements. 2D transformations can change the x- and y-axis of an element. See the Pen Transform explanation by CSS-Tricks (@css-tricks) on CodePen. We can also use the rotateX, rotateY and rotateZ functions, like so: See the Pen Transform explanation by CSS-Tricks (@css-tricks) on CodePen. Translate.element { transform: translate(20px, 10px); } This transform function moves an element sideways, or up and down.

CSS Pseudo-Elements and Transforms: My Favorite CSS Tools , How CSS Transforms and Pseudo Content can make your front-end If you've ever used :before or :after in your selector and it had the right bottom , or you can use CSS lengths to define the position from the top left corner. The rotate () CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a <transform-function> data type. The fixed point that the element rotates around — mentioned above — is also known as the transform origin.

Changing the Transform Position with transform-origin, The default transform origin of an HTML element is its center, so the transform functions we apply move elements according to this center point. We can modify​  Using CSS transforms, we have the option of setting the the appropriate transform-origin on our SVG element, or of chaining translates before and after the scale — first we translate the system of coordinates so its origin is at the 50% 50% point of our SVG element, then apply the scale, and then reverse the first translation.

How to Apply CSS3 Transforms to Background Images, The container element can have any styles applied, but it must be set to position: relative , since our pseudo element will be positioned within it. CSS helps you to position your HTML element. You can put any HTML element at whatever location you like. You can specify whether you want the element positioned relative to its natural position in the page or absolute based on its parent element. Now, we will see all the CSS positioning related properties with examples − Relative Positioning

Comments
  • Do you mean you want your text object to fit to the right-top corner of it's wrapper after rotation, right?
  • @faridv, I want to rotate a <p> element 90 degrees clockwise and position it so that the corner that is its top-left corner before the rotation (and which therefore becomes its top-right corner after the rotation) ends up at exactly the same location as the top-right corner of the <p> element's parent block.
  • The order in which you write the two properties doesn't matter. Positioning is always applied before any transforms.
  • you mention the browsers it fails on; which browsers have you tested where it succeeds?
  • Have you managed to make it succeed (i.e. to obtain the positioning I was after) using @keyframes? If so, please could you edit your answer to include that solution, and if it works, then I will mark your answer as accepted :)
  • Is this not what you were after? @sampablokuper
  • Notice that even if you take out everything but the transform, it still does not work. I don't think the positioning is what is causing your error
  • Not sure I understand what you mean. I can't see how it could possibly be expected to work if you take out everything but the transform!
  • well leave the id on it and if you just transform it, it doesn't do anything