0

When you use transform on div, absolute positioning not working as you expected anymore, and seems like it needs to be calculated manually. For instance when you want your div to be at the bottom of container you do:

div{
    position:absolute;
    bottom:0%;
}

But if you transform this div like -webkit-transform:rotateX(angle); it won't be at the bottom of container. Is places somewhere in between of container depends of its size.

I create jsfiddle to illustrate this, and also show what i'm trying to achive: http://jsfiddle.net/9NHJt/

Here's the code i use:

<div class="container"> height: 150px;
    <div class="inner"></div>
</div>

<div class="container" style="height:250px"> height: 250px;
    <div class="inner"></div>
</div>

<div class="container"> desired result
    <div class="inner" style="bottom:-19px"></div>
</div>


.container{
    margin-top:30px;
    position:relative;
    width:500px;
    height:150px;
    -webkit-perspective:1000px;
    border:1px solid black
}

.inner{
    -webkit-transform:rotateX(45deg);
    background:rgba(238, 238, 238, 0.8);
    border:1px dashed black;
    position:absolute;    
    width:100%;
    height:100%;
    bottom:0%; /* Needs to be calculated */
}

So, is there a way to fix this without javascript? Or how to calculate correct bottom position with js?

nukl
  • 10,073
  • 15
  • 42
  • 58

2 Answers2

0

here is a Fiddle to check, let me know if this is what you want?

.inner{
    -webkit-transform:rotateX(45deg);
    background:rgba(238, 238, 238, 0.8);
    border:1px dashed black;
    position:absolute;    
    width:100%;
    height:100%;
    /* bottom:0%; removed */
}
shammelburg
  • 6,974
  • 7
  • 26
  • 34
  • No, it's not the right solution. Second inner does not matches bottom of container. And what if i want `.inner` to be `top:0%` for example, or `.container` is `height:100%`? – nukl Jun 01 '13 at 16:15
0

Ok, you should add a tag : 'geometry'. First thing, remember to sine and cosine, then take a calculator : rotation around the x assis is 45 degrees
The cos of 45 it's around 0,7, then//value of cos for 45 degrees
0.7*150=106 //the height of the rectangle afther transformation
(150-106)/2 //the space remaining in the parent up and down the element divided by 2
the result is 22 and this is positive top or the negative bottom you need.

Same for the second block: (250-(0.7*250))/2 = 37.5

Remember to recalculate the value of the angle if you change it. More rounded the numbers are, more you will be accurate. Remember that calulation can be heavy for many tag.

Alessandro Gabrielli
  • 892
  • 6
  • 7
  • thanks, looks great. But i don't understand how's `-webkit-perspective` value could be ignored in calculations? – nukl Jun 02 '13 at 11:59
  • I think because perspective has no effects there (in google chrome).. https://groups.google.com/a/chromium.org/forum/?fromgroups#!msg/chromium-bugs/BdyVDwXelvU/Q6GWJk3LndgJ – Alessandro Gabrielli Jun 02 '13 at 12:29
  • If you need to know what's the transformation for perspective: http://stackoverflow.com/questions/8029605/what-is-the-math-behind-webkit-perspective – Alessandro Gabrielli Jun 02 '13 at 12:38
  • webkit perspective could works only on chrome and safari but if you have this feature disabled, it won't works everywhere chrome://gpu/ – Alessandro Gabrielli Jun 02 '13 at 12:47
  • perspective works in Firefox as well, even without `-moz-` prefix – nukl Jun 02 '13 at 13:52
  • @nukl Though -moz-transform. for firefox because of this: http://www.w3schools.com/cssref/css3_pr_perspective.asp and this: http://stackoverflow.com/questions/7572884/webkit-transform-alternative-for-firefox Anyway it works as you expected? – Alessandro Gabrielli Jun 02 '13 at 14:21