Adjust the transformation origin in relation to the container. Text that has been rotated

Seeking assistance to understand the functionality of transform-origin, my research efforts have been unsuccessful in finding a solution tailored to my specific situation. Here's the challenge I'm facing:

I have a fixed footer with predetermined height, containing two lines of rotated text (left column). How can I gain precise control over its positioning? Currently, the text begins at the top of the footer and extends beyond it. You can view my current code setup in this fiddle: http://jsfiddle.net/eury7f6f/

If anyone has any suggestions on how to achieve the desired outcome, please share.

.vertical-text {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;

    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
csstransformcss-transforms

Answer №1

Imagine setting transform-origin as driving a nail into the block. A transform-origin: right bottom rotates the element around its lower right corner.

The 2d syntax is: transform-origin: x y, where 0 0 represents left top and 100% 100% represents right bottom.

In relation to the current problem; instead of rotating the actual text elements, consider wrapping them in another element and rotating that element around its top right corner. Subsequently, wrap that element in yet another element and shift it 100% of its width back to the left. This element can then be positioned absolutely according to your needs.

This will enable you to stack elements while removing them from the content flow if desired.

This process would resemble something like the following:

HTML

<div class="position-me">
  <div class="rotate-me">
    <p>© Copyright Some vertical text.</p>
    <p>Oh my god some really long vertical text...how long?!</p>  
  </div>
</div>

CSS

.position-me {
  transform: translateX(-100%);
}

.rotate-me {
  transform: rotate(-90deg);
  transform-origin: right top;
  text-align: right;
}

Check out this pen.

Answer №2

The issue you're encountering is that there isn't a suitable transform-origin setting to achieve your desired outcome.

If you position the transform-origin to the left of the div, aligning them may be possible if they are allowed to move in a downward direction instead of rotating -90 degrees, consider rotating 90 degrees).

Conversely, setting the transform-origin to the right of the div will result in misalignment due to the differing end points on the right side.

Your best option would be to incorporate a translate into the rotation:

.vertical-text {
        -webkit-transform: rotate(-90deg)  translateX(-100%);
        -moz-transform: rotate(-90deg)  translateX(-100%);
        -ms-transform: rotate(-90deg) translateX(-100%);
        -o-transform: rotate(-90deg)  translateX(-100%);
        transform: rotate(-90deg)  translateX(-100%);

        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        transform-origin: 0 0;

        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

Check out this fiddle for reference

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing SASS with React: An in-depth guide to integrating SASS into your React projects

When it comes to using SASS in React, the first step is... To get started, you need to install node-sass and then add import ./mysass.scss in your index.js file. I followed these steps successfully with Bootstrap's SASS integration. In fact, I mana ...

cssreactjssass

Ensure Navbar elements remain on a single line

I need my Bootstrap Navbar elements to remain on a single line regardless of the screen width. Although I have searched for a solution to this issue numerous times and tried different approaches, none have proven effective in my case. Below is the code s ...

htmlcsstwitter-bootstrap

Issues with connecting static files in express.js

Hey there! I'm having an issue with the redirect not working when I click the "Submit" button on the login page. The code in my index.js file looks like this: app.use(bodyParser.urlencoded({ extended: true })); app.use(express.static(path.join(__dir ...

javascriptcssexpress

The alignment issue persists in HTML/CSS despite troubleshooting efforts

I am facing a challenge while attempting to center text within a modal window, despite my efforts the text remains uncentered. This is my HTML code: <div ng-init="modalCompassDir()"> <div class="myModal"> <img class='floor ...

javascripthtmlcss

CSS Only flyout navigation - reveal/hide with a tap or click

I want to make adjustments to a CSS-only menu that has a horizontal flyout effect triggered by hovering. I am looking to achieve the same effect on touch or tap - meaning, one tap to open the menu and another tap to close it. Is it possible to accomplish ...

css

Triple-decker Angular Table CSS Layout

Please take a look at the code below, it is currently working properly. <div ng-repeat="download in productDownloads" class="container"> <div class="row"> <div class="cell"> <strong>{{download.productName}}</strong> </di ...

angularjstwitter-bootstrapcssuser-interfacecss-tables

How to instantly return progress bar to zero in bootstrap without any animations

I am currently working on a task that involves multiple actions, and I have implemented a bootstrap progress bar to visually represent the progress of each action. However, after completion of an action, the progress bar is reset to zero using the followi ...

javascriptjquerycsstwitter-bootstrap

Having some trouble getting the text to float alongside an image properly in HTML and CSS

I'm having trouble positioning my text next to an image. I've tried floating it to the right and even using a flexbox, but nothing seems to be working well. Here is the code I have... <div class="tab-content"> <div clas ...

htmlcss

Utilizing flexbox, absolute positioning, and 100% height in web design

While experimenting with a flexbox inside an absolute box within a div of defined height, I encountered a problem. Let me explain the issue step by step. Here is a link to a fiddle demonstrating the problem: https://jsfiddle.net/8ub9tyub/ When hovering o ...

htmlcssflexbox

Magento stock indicator made easy with custom styling using CSS

I needed a basic stock indicator that was easy to use. ...

cssmagentoretina-displaymagento-1.6hdpi

Cascading Style Sheets can be disrupted by Scalable Vector Graphics

Currently, I am incorporating SVG Icons that I created in Illustrator into my Vue.js Webapp. I have utilized Webpack's "require" to load the icons. Rather than accessing the SVGs directly using the src attribute of the img tag, I am inserting them usi ...

csssvgwebpackvue.js

Having trouble getting the popover window to appear in Bootstrap when utilizing the modal class?

I attempted to create a responsive image gallery using the bootstrap framework. Each image has its own modal class, but when I click on an image, no popup window appears, only a dark screen is displayed. I have checked this in the Bootstrap documentation ...

javascriptjqueryhtmlcsstwitter-bootstrap

Issue with jSignature transitioning properly from display:none to display:block within a multi-page form

After searching through numerous resources, I have been unable to find a solution to my specific issue. I have a multi-page form that incorporates jSignature as the final tab. The structure closely follows the example from the W3Schools website, tailored t ...

javascripthtmlcssformsjsignature

A triangular-shaped div positioned at the bottom with a captivating background image

Is there a way to create a div with a unique twist - a triangle shape at the bottom? I've been attempting to add a background image within the triangle using a pseudo element (:after), but so far, it hasn't been successful. #homebg:after{ co ...

htmlcsssvgcss-shapes

Position a div at the center of the page while aligning it inline with another div

Is there a way to center an element on the screen while having another element positioned to its left? I have tried using float left and adjusting the padding of the center element to match the width of the left element. However, this method may not work ...

css

The stacking order of a child element within a parent element, which has a transform

Hey there, I've encountered a problem and was wondering if you could assist me with it. In the code snippet provided below, you'll see that there are elements with: transform: translate(0,0); Within these elements, there is a "dropdown" elemen ...

htmlcssz-indexcss-transforms

Laravel 4.2 email template not applying CSS inline style for text color

Working on setting up email functionality in Laravel 4.2 and I've got an email template ready to go. The data for the emails is stored in an array, but I'm running into an issue where if I pass a parameter like $variable, the styles are only bein ...

phphtmlcssemaillaravel-4

When a two-column layout with a scrollable column experiences difficulty in scrolling continuously

I set out to create a webpage featuring two fixed columns at the top and a footer at the bottom. The main goal is to have the left column remain static while the right column is scrollable. This is what I aim to achieve - When the mouse hovers over the l ...

htmlcssbootstrap-4scroll

Creating a straightforward CSS design that stretches to fit the entire viewport dimension

I am attempting to create a simplistic layout using HTML/CSS, as depicted in the wireframe below: /------------------------------------------\ | | | header div | | ...

htmlcssxhtml

Extract the content of an element and incorporate it into a script (AddThis)

HTML: <div id="file-section"> <div class="middle"> <p class="description"> Lorem ipsum... </p> </div> </div> jQuery: var share_on_addthis = { description: $('#file-section ...

javascriptjqueryhtmlcss