0

I am looking for a way ONLY in CSS to adjust the height of a container <div> tag whenever one of its children have been rotated. I am very much aware (and can totally implement) a solution for this using JavaScript, but I was hoping to find a CSS solution.

This fiddle shows my quandary: http://jsfiddle.net/spryno724/yX56u/

HTML:

<div class="container">
    <p>Test</p>
    <img class="rotate" src="https://tse1.mm.bing.net/th?id=HN.608054218431465781&pid=1.7" />
</div>

CSS:

.container {
    border: 1px solid red;
    overflow: auto;
    position: relative;
    width: 100%;
}

.rotate {
    -moz-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);

    position: absolute;
    top: 160px;
}

Does anyone have any insight as to how to have the container automatically adjust its height regardless of the rotated object's natural height or rotation amount?

Humayun Shabbir
  • 2,961
  • 4
  • 20
  • 33
Oliver Spryn
  • 16,871
  • 33
  • 101
  • 195
  • You want one element to change it's height when another element has finished rotating? .. i'm not gonna attempt to do that for you, but look into css3 and keyframes, it should be doable. – Brunis Jul 30 '14 at 22:12

1 Answers1

2

Personally I don't think it can be done with pure css. To calculate the height of the container you would need to do something like this:

   heightContainer = sin(angleImg) * (widthImg + heightImg)

And that is something that just can't be done in pure css. You could use Javascript inside the css, or use something like Less to generate the code. But putting js inside your css is just awful (that's what you have js files for). And the Less solution would require set values for the angle and dimensions, and if those would be fixed you could just set the container height fixed as well...

Other then calculating the height, I don't see any solutions that could work. Making the img relative again won't help, since the transform won't be taken into account. And I tried playing with the answer to this related question (which is quite clever), but I don't think it can be applied to your case.

So imo: No, it can't be done with pure css But I would love to see someone prove me wrong!

Community
  • 1
  • 1
Pevara
  • 14,242
  • 1
  • 34
  • 47