CSS rotation causing issues with absolute positioning

Question

CSS rotation causing issues with absolute positioning

In the example below, I have demonstrated the current behavior I am experiencing and the desired outcome.

// Rotated div
rotated.style.left = "50px";
rotated.style.top = "100px";
// Original "untouched" div
original.style.left = "50px";
original.style.top = "100px";
// Where the rotated div *should* be
expected.style.left = "-10px";
expected.style.top = "160px";

div {
  position: absolute;
  height: 80px;
  width: 200px;
  opacity: 0.5;
  mix-blend-mode: overlay;
}

#rotated {
  transform: rotateZ(90deg);
  background: blue;
}

#original {
  background: red;
}

#expected {
  transform: rotateZ(90deg);
  background: green;
}

<div id="rotated"></div>
<div id="original"></div>
<div id="expected"></div>

The red div represents the "original" div without any transformations applied. The blue div is rotated by 90 degrees but their corners do not align as expected. The green div shows the correct position where the blue div should be.

It is evident that the left and top properties are not working as intended. While I am aware of the issue, I am seeking solutions or alternatives. I have come across the transform-origin property but faced challenges in its implementation due to dynamically created elements with unknown dimensions that may change over time.

For this specific example, adding transform-origin: 40px 40px; to the div#rotated element resolves the issue. However, replicating this for multiple elements and adapting it to changing dimensions is not practical in my project.

I am exploring two potential solutions:

A CSS-based approach that dynamically calculates the element's height to determine the transform-origin (or any CSS solution that works effectively)
Using JavaScript to compute the accurate position (e.g., -10, 160) whenever an element needs to be moved

--- update ---

This challenge is further complicated when dealing with rotations of 180deg or 270deg, rendering the default transform-origin of 40px 40px ineffective. Recalculating the transform-origin for each element rotation is impractical and something I aim to avoid.

javascript html css

Answer 1

Answer №1

To achieve the desired effect, consider adding a translate function to your transform property.

.container {
  position: relative;
  margin: 200px 0 0 200px;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

div {
  position: absolute;
  height: 80px;
  width: 200px;
  opacity: 0.5;
  mix-blend-mode: overlay;
}

#rotated {
  transform: rotateZ(90deg);
  background: blue;
}

#original {
  background: red;
}

#expected {
  transform: rotateZ(90deg) translateY(-100%);
  background: green;
  transform-origin: 0% 0%;
}

<div class="container">
  <div id="rotated"></div>
  <div id="original"></div>
  <div id="expected"></div>
</div>

All elements are enclosed within a wrapper with a visible border. The transform origin is set as per the bounding box.

Answer 2

To achieve the desired effect, consider adding a translate function to your transform property.

.container {
  position: relative;
  margin: 200px 0 0 200px;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

div {
  position: absolute;
  height: 80px;
  width: 200px;
  opacity: 0.5;
  mix-blend-mode: overlay;
}

#rotated {
  transform: rotateZ(90deg);
  background: blue;
}

#original {
  background: red;
}

#expected {
  transform: rotateZ(90deg) translateY(-100%);
  background: green;
  transform-origin: 0% 0%;
}

<div class="container">
  <div id="rotated"></div>
  <div id="original"></div>
  <div id="expected"></div>
</div>

All elements are enclosed within a wrapper with a visible border. The transform origin is set as per the bounding box.

Answer 3

Answer №2

A different approach to transforming and rotating elements

If the rotation isn't quite what you're looking for, try adjusting the translate parameters:

translateY
translateX
translate with 2 values

Make sure to always consider the bounding box of the wrapper: (0, 0) is at the top left corner

.wrapper1 {
  position: relative;
  top: 100px;
  left: 100px;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

.wrapper2 {
  position: relative;
  top: 250px;
  left: 100px;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

.wrapper3 {
  position: relative;
  top: 400px;
  left: 100px;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

.wrapper4 {
  position: relative;
  top: 550px;
  left: 100px;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

div {
  position: absolute;
  height: 80px;
  width: 200px;
  opacity: 0.5;
  mix-blend-mode: overlay;
}

.rotated1 {
  transform: rotateZ(90deg);
  background: blue;
}

.rotated2 {
  transform: rotateZ(90deg) translateY(-100%);
  transform-origin: 0 0;
  background: blue;
}

.rotated3 {
  transform: rotateZ(90deg) translateY(-50%);
  transform-origin: 0 0;
  background: blue;
}

.rotated4 {
  transform: rotateZ(90deg) translate(-50%, -50%);
  transform-origin: 0 0;
  background: blue;
}

.original {
  background: red;
}

<div class="wrapper1">
  <div class="rotated1"></div>
  <div class="original"></div>
</div>
<div class="wrapper2">
  <div class="rotated2"></div>
  <div class="original"></div>
</div>

<div class="wrapper3">
  <div class="rotated3"></div>
  <div class="original"></div>
</div>
<div class="wrapper4">
  <div class="rotated4"></div>
  <div class="original"></div>
</div>

Answer 4

A different approach to transforming and rotating elements

If the rotation isn't quite what you're looking for, try adjusting the translate parameters:

translateY
translateX
translate with 2 values

Make sure to always consider the bounding box of the wrapper: (0, 0) is at the top left corner

.wrapper1 {
  position: relative;
  top: 100px;
  left: 100px;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

.wrapper2 {
  position: relative;
  top: 250px;
  left: 100px;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

.wrapper3 {
  position: relative;
  top: 400px;
  left: 100px;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

.wrapper4 {
  position: relative;
  top: 550px;
  left: 100px;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

div {
  position: absolute;
  height: 80px;
  width: 200px;
  opacity: 0.5;
  mix-blend-mode: overlay;
}

.rotated1 {
  transform: rotateZ(90deg);
  background: blue;
}

.rotated2 {
  transform: rotateZ(90deg) translateY(-100%);
  transform-origin: 0 0;
  background: blue;
}

.rotated3 {
  transform: rotateZ(90deg) translateY(-50%);
  transform-origin: 0 0;
  background: blue;
}

.rotated4 {
  transform: rotateZ(90deg) translate(-50%, -50%);
  transform-origin: 0 0;
  background: blue;
}

.original {
  background: red;
}

<div class="wrapper1">
  <div class="rotated1"></div>
  <div class="original"></div>
</div>
<div class="wrapper2">
  <div class="rotated2"></div>
  <div class="original"></div>
</div>

<div class="wrapper3">
  <div class="rotated3"></div>
  <div class="original"></div>
</div>
<div class="wrapper4">
  <div class="rotated4"></div>
  <div class="original"></div>
</div>

Answer 5

Answer №3

My solution involves calculating the appropriate transform-origin based on the rotation angle (always 0, 90, 180, or 270). Here's the TypeScript code snippet:

export function calculateTransformOrigin(element: HTMLElement) {
    const { width, height, transform } = getComputedStyle(element);

    if (transform && transform !== "none") {
        const values = transform.match(/^matrix\((.+)\)$/)?.[1].split(", ");

        if (values) {
            element.style.translate = "";

            const [a, b] = values.map(Number);

            const angle = (Math.round(Math.atan2(b, a) * (180 / Math.PI)) + 360) % 360;

            if (angle === 0 || angle === 90) return parseFloat(height) / 2 + "px " + parseFloat(height) / 2 + "px";

            if (angle === 180) return "center";

            element.style.translate = "0 " + (parseFloat(width) - parseFloat(height)) + "px";

            return parseFloat(height) / 2 + "px " + parseFloat(height) / 2 + "px";
        }
    }

    return "center";
}

For rotations of 0 or 90 degrees, the transform origin is half the height of the element (40px 40px). If it's rotated by 180 degrees, we set it to center. For 270 degrees, additional adjustments are needed including translating the element downwards by the difference between its width and height.

When updating the angle of an element, simply adjusting the transform origin at the end suffices:

     set angle(v: number) {
        this.#angle = v % 360;

        this.element.style.transform = `rotateZ(${v}deg)`;

        if (v === 180) {
            this.name.style.transform = `rotateZ(${v}deg)`;
        } else {
            this.name.style.transform = "";
        }

        this.element.style.transformOrigin = calculateTransformOrigin(this.element);
    }

Answer 6

My solution involves calculating the appropriate transform-origin based on the rotation angle (always 0, 90, 180, or 270). Here's the TypeScript code snippet:

export function calculateTransformOrigin(element: HTMLElement) {
    const { width, height, transform } = getComputedStyle(element);

    if (transform && transform !== "none") {
        const values = transform.match(/^matrix\((.+)\)$/)?.[1].split(", ");

        if (values) {
            element.style.translate = "";

            const [a, b] = values.map(Number);

            const angle = (Math.round(Math.atan2(b, a) * (180 / Math.PI)) + 360) % 360;

            if (angle === 0 || angle === 90) return parseFloat(height) / 2 + "px " + parseFloat(height) / 2 + "px";

            if (angle === 180) return "center";

            element.style.translate = "0 " + (parseFloat(width) - parseFloat(height)) + "px";

            return parseFloat(height) / 2 + "px " + parseFloat(height) / 2 + "px";
        }
    }

    return "center";
}

For rotations of 0 or 90 degrees, the transform origin is half the height of the element (40px 40px). If it's rotated by 180 degrees, we set it to center. For 270 degrees, additional adjustments are needed including translating the element downwards by the difference between its width and height.

When updating the angle of an element, simply adjusting the transform origin at the end suffices:

     set angle(v: number) {
        this.#angle = v % 360;

        this.element.style.transform = `rotateZ(${v}deg)`;

        if (v === 180) {
            this.name.style.transform = `rotateZ(${v}deg)`;
        } else {
            this.name.style.transform = "";
        }

        this.element.style.transformOrigin = calculateTransformOrigin(this.element);
    }

CSS rotation causing issues with absolute positioning

Answer №1

Answer №2

Answer №3

Similar questions

HTML and Python synchronize perfectly when handling date formatting

I am attempting to implement an Express static middleware as demonstrated in this book, but I am having trouble understanding the intended purpose of the example

Alert from Google Chrome about Service Worker

How can I prevent a browser from allowing users to select an image tag?

simulating the use of `usePrompt` in react-router-dom version 6

How to check off a checkbox using a jQuery function

What is the best method to generate a distinct identifier for individual input fields using either JavaScript or jQuery?

The response from the XHR object is coming back as "Object Object

retrieve the variable contained within the callback function

Using Lodash to Substitute a Value in an Array of Objects

Output JSON data using Javascript

The art of layering images: How to stack one image on top of another

Arrange components within the form

Modify the JSON file stored on the local server

Transforming HTML content in real-time using Express.js

The ace.edit function is unable to locate the #javascript-editor div within the mat-tab

Managing a large number of records in a for loop on a Node.js server can be challenging, especially when dealing with nearly

How to iterate over the request body in Node.js using Express?

Tips for refreshing a D3.js bubble chart with live JSON data updates

Effortlessly refresh a data object in Vue.js without relying on a function