Как рассчитать абсолютную позицию преобразованного div

Question

Когда вы используете transform в div абсолютное позиционирование не работает, как вы ожидали, и, похоже, его нужно вычислять вручную. Например, когда вы хотите, чтобы ваш div был в нижней части контейнера, вы делаете:

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

Но если вы преобразуете этот div как -webkit-transform:rotateX(angle); это не будет на дне контейнера. Находится ли где-то посередине контейнера в зависимости от его размера.

Я создаю jsfiddle, чтобы проиллюстрировать это, а также показать, чего я пытаюсь достичь: http://jsfiddle.net/9NHJt/

Вот код, который я использую:

<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 */
}

Итак, есть ли способ исправить это без JavaScript? Или как правильно рассчитать нижнюю позицию с помощью js?

Answer 1

Хорошо, вы должны добавить тег: "геометрия". Прежде всего, не забудьте синусы и косинусы, а затем возьмите калькулятор: вращение вокруг оси x составляет 45 градусов.
Cos 45 это около 0,7, то//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
результат - 22, и это положительный максимум или отрицательный минимум, который вам нужен.

То же самое для второго блока: (250-(0,7*250))/2 = 37,5

Не забудьте пересчитать значение угла, если вы его измените. Чем больше округлены цифры, тем точнее вы будете. Помните, что расчет может быть тяжелым для многих тегов.

Answer 2

Вот скрипка для проверки, дайте мне знать, если это то, что вы хотите?

.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 */
}