Немаркированный ребенок не выравнивается

Ответ 1

Поведение "неквалифицированного" ребенка нормальное, это то, как работает перекос. Чтобы понять это, я собираюсь упростить вопрос:

почему не skewX(40deg) совпадает с skewX(20deg) skewX(20deg)?

div {
    width: 100px; height: 100px;
    position:absolute;
    top:20px; left:20px;
    transform-origin: 0 0;
}
.d1 {
    transform: skewX(40deg);
    background: red;
    opacity:0.7;
}
.d2 {
    transform: skewX(20deg) skewX(20deg);
    background: blue;
    opacity:0.7;
}
/** FOR THE DEMO **/
body {background: url('http://i.stack.imgur.com/GySvQ.png');background-size: 10px;}
.m {text-align:right;padding-top:105px;}
.m1{width:83px;color:red;border-right:1px solid red;}
.m2 {width:72px;color:blue;border-right:1px solid blue;}
p{margin:0 0 5px 150px;color:red;}
.b{color:blue;}

<div class="d1"></div>
<div class="d2"></div>
<div class="m m1">x = 83</div>
<div class="m m2"><br/>x = 72</div>
<p class="r">skewX(40deg)</p>
<p class="b">skewX(20deg) skewX(20deg)</p>

Ответ 2

skew вводит вертикальное смещение, равное касательной угла. Итак, перекос (20deg) вводит смещение tan (20deg).

Чтобы ваш пример работал, должно быть, что

tan(-20deg) = tan(20deg) + tan( -2 * 20deg)

или

tan (2 * x) = 2 * tan (x)

но это неверно, касательная и сумма не являются асоциативными

требуемый перекос для его изменения

result = - atan ( 2 * tan (x))

что при x = 20 дает результат

36,052388732387908475278040193987

(приблизительно,)

Ответ 3

В качестве пересмотра моего первоначального ответа, в результате которого был получен вывод, а не объяснение, я бы постулировал ^* что эффект проявляется, потому что вы предполагаете отрицательный перекос, который можно использовать для компенсации положение на положительной кривой, когда фактически - минус значения, которые вы используете на отрицательной кривой.

Сначала потребовалось бы, чтобы мера перекоса была сингулярной и возникала на одной и той же кривой (см. нормальную кривую ниже) с положительными и отрицательными значениями, позволяющими сдвигать вдоль кривой.

Однако кривая для отрицательных и положительных перекосов обратна хвостом.

Нулевое перекос - единственное значение, которое действует на обоих. Таким образом, если у вас есть элемент, примените к нему перекос на 20 градусов, а затем примените перекос минус 20, у вас на самом деле будет косые (положительные или отрицательные) значения нуля, поэтому использование отрицательного смещения будет работать..

Однако, если вы затем примените дополнительный отрицательный перекос, у вас будет отрицательно искаженный элемент, кривая для которого отличается и не равна обратной эквивалентной позиции на положительной кривой.

20deg = Исходный элемент, 20deg на положительной косой кривой

20deg - 20deg = 0, то же самое для положительной и отрицательной косой кривой

-40deg = взятие элементов тока 20deg skew, минус 40 град = 20deg на отрицательной косой кривой - НЕ эквивалентная "противоположная" точка на положительной косой кривой

При использовании psuedos перекос работает, потому что вы arent компенсируете положительно искаженное значение с помощью нового искаженного количества.

^* Я не математик, так что боюсь, я могу только утверждать это как гипотезу

Ответ 4

Я просто обращусь к основной проблеме, почему это происходит, вместо того, чтобы пытаться предоставить альтернативы

Поскольку ваша математика кажется точной, мы должны искать то, что не точно, что является самой платформой...

статья MDN об преобразовании утверждает, что это не стабильная технология:

Это экспериментальная технология
Поскольку эта спецификация технологии не стабилизировалась, проверьте

(акцент мой)

Рассмотрим следующее:

Когда вы перегибаете главный div, для этого требуется огромное количество расчетов рендеринга браузера в 2D-среде, как бы это выглядело, учитывая как 3 оси... Псевдоэлемент страдает от этих вычислений, так как вы можете видеть, вы еще немного немного от края, где вы его положили:

Посмотрите, что я только что переместился влево, и это заставило его немного спуститься, согласно перекосу Y, примененному к главному div. Теперь добавьте еще одно огромное количество вычислений, когда вы перекосите псевдоэлемент... Браузер просто не сможет обеспечить точный рендеринг того, как будет выглядеть 3D-пространство в 2D-среде...