My problem is when I rotate my h2 element inside this div, the height and width stays the same. I want my div to change its height and width base on its content. The first image is without the rotation of the h2 element. The second image is where I apply the rotate transform on the h2 element.

FIRST IMAGE: without rotate

SECOND IMAGE: with rotate

This is my code:

HTML:

    <!-- Gallery Title and Nav-->
    <div >
      <!-- Gallery title -->
      <div >
        <h2>GALLERY</h2>
      </div>

      <!-- gallery pciker -->
      <div >
        <h4>POSTER</h4>
        <h4>INFOGRAPHICS</h4>
        <h4>MAGAZINE 01</h4>
        <h4>MAGAZINE 02</h4>
      </div>
    </div>

CSS:

/* Gallery Title and Nav */
.gallery-title-and-nav {
    position: absolute;
    background: red;
    height: 60vh;
    width: fit-content;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    overflow: hidden;
    color: white;

    display: flex;
    flex-direction: row;
    align-items: center;
    flex-basis: auto
}

.gallery-title {
    background: green;
    height: fit-content;
    width: fit-content;
}

.gallery-title h2 {
    transform: rotate(-90deg);
}

.gallery-nav {
    background: blue;
}

CodePudding user response：

The problem with doing just a transform is that the element still has the same positioning and size as before the transform as far as the overall layout goes.

What you could use is a vertical text writing method. This is not a transform and the element will take up the dimensions:

/* Gallery Title and Nav */

.gallery-title-and-nav {
  position: absolute;
  background: red;
  height: 60vh;
  width: fit-content;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  overflow: hidden;
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-basis: auto
}

.gallery-title {
  background: green;
  height: fit-content;
  width: fit-content;
}

.gallery-title h2 {
  transform: rotate(180deg);
  writing-mode: vertical-lr;
}

.gallery-nav {
  background: blue;
}

<!-- Gallery Title and Nav-->
<div >
  <!-- Gallery title -->
  <div >
    <h2>GALLERY</h2>
  </div>

  <!-- gallery pciker -->
  <div >
    <h4>POSTER</h4>
    <h4>INFOGRAPHICS</h4>
    <h4>MAGAZINE 01</h4>
    <h4>MAGAZINE 02</h4>
  </div>
</div>

CodePudding user response：

The mdn web docs tell that,

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

It means that ,your transform is seen only visually rotated,but the container predicts it as if the text is never rotated,and still horizontal

Solution

Instead rotate the parent of it(.gallery-title),the child(s) will also be rotated

/* Gallery Title and Nav */
.gallery-title-and-nav {
    position: absolute;
    background: red;
    height: 60vh;
    width: fit-content;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    overflow: hidden;
    color: white;

    display: flex;
    flex-direction: row;
    align-items: center;
    flex-basis: auto
}

.gallery-title {
    background: green;
    height: fit-content;
    width: fit-content;
}

.gallery-title{/*I HAVE CHANGED*/
    transform: rotate(-90deg);
}

.gallery-nav {
    background: blue;
}

<!-- Gallery Title and Nav-->
    <div >
      <!-- Gallery title -->
      <div >
        <h2>GALLERY</h2>
      </div>

      <!-- gallery pciker -->
      <div >
        <h4>POSTER</h4>
        <h4>INFOGRAPHICS</h4>
        <h4>MAGAZINE 01</h4>
        <h4>MAGAZINE 02</h4>
      </div>
    </div>

Other issues

• Since the text is h2(heading) it has some margin,
  Solution: .gallery-title h2{ margin:0; }
• In .gallery-title-and-nav, height: 60vh; is relative to window, and it creates some issue
  Solution: height:200px;/*or anything else with unit px*/ or height:fit-content,fit content is best and I am using it in below code

Final answer code:

/* Gallery Title and Nav */
.gallery-title-and-nav {
    position: absolute;
    background: red;
    height: fit-content;/*CHANGED*/
    width: fit-content;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    overflow: hidden;
    color: white;

    display: flex;
    flex-direction: row;
    align-items: center;
    flex-basis: auto
}

.gallery-title {
    background: green;
    height: fit-content;
    width: fit-content;
}

.gallery-title{/*I HAVE CHANGED*/
    transform: rotate(-90deg);
}

.gallery-nav {
    background: blue;
}
.gallery-title h2{/*I HAVE ADDED*/
    margin:0;
}

<!-- Gallery Title and Nav-->
    <div >
      <!-- Gallery title -->
      <div >
        <h2>GALLERY</h2>
      </div>

      <!-- gallery pciker -->
      <div >
        <h4>POSTER</h4>
        <h4>INFOGRAPHICS</h4>
        <h4>MAGAZINE 01</h4>
        <h4>MAGAZINE 02</h4>
      </div>
    </div>