css - rotate - Niño sin clavar que no se alinea

translate css animation

Question

Nota: esta pregunta es sobre un problema con la salida y no sobre la creación de cualquier forma.

Recientemente he creado una forma:

.prog {
    position: relative;
    top: 20px;
    width: 150px;
    height: 120px;
    background: green;
    display: inline-block;
    transform: skewY(20deg);
    transform-origin: 0% 100%;
    transition: 0.8s ease;
}
.prog:before {
    content: "";
    position: absolute;
    left: 150px;
    width: 150px;
    height: 120px;
    background: red;
    transform: skewY(-40deg);
    transform-origin: 0% 100%;
    transition: 0.8s ease;
}

<div class="prog "></div>

En el fragmento anterior, la forma verde es el elemento .prog y está sesgada. La forma roja es :before pseudoelemento del primer elemento.

.prog (skewY) a 20deg. Ahora, necesitaba :before de ser -20deg. Para esto, primero tuve que desmarcarlo. Luego sesgarlo más 20deg.
Así que el valor de skewY final será -40deg. Apliqué esto, y sas transform-origin apropiadas.

Pero el problema es que los puntos superiores de ambas formas no se alinean . Deben, pero no lo son. Aquí hay una imagen que muestra el problema:

Las líneas negras son solo para referencia.

¡Ahora aún más!

Sesgo -20 -20 lugar de -40 :

transform: skewY(-20deg) skewY(-20deg); <-- Esto funciona!
transform: skewY(-40deg); <---------------- Esto no!

Answer 1

A modo de revisión de mi respuesta inicial que produjo una salida en lugar de una explicación, postularía ^* que el efecto se ve porque está suponiendo que se puede utilizar un sesgo negativo para compensar una posición en la curva de sesgo positiva, cuando en realidad - en los valores negativos está operando en la curva de sesgo negativa.

Esto requeriría primero que la medida de sesgo fuera singular y que ocurriera en la misma curva (vea la curva normal a continuación), con valores positivos y negativos que permiten desplazarse a lo largo de la curva.

Sin embargo, la curva para los sesgos negativos y positivos tiene una cola inversa.

El sesgo cero es el único valor que funciona igual en ambos. Como tal, si tiene un elemento, aplíquele un sesgo de 20 grados, luego aplique un sesgo de menos 20, tendrá un sesgo (positivo o negativo) de cero, por lo que usar un desplazamiento negativo parece funcionar.

Sin embargo, si luego aplica sesgo negativo adicional, tendrá un elemento sesgado negativamente, cuya curva es diferente y no es igual a la posición inversa equivalente en la curva de sesgo positivo.

20deg = Elemento original, 20deg en curva de sesgo positiva

20deg - 20deg = 0, igual para curvas de sesgo positivas y negativas

-40deg = tomando los elementos de inclinación de 20deg, menos 40 grados = 20deg en curva de desviación negativa - NO es un punto ''opuesto'' equivalente en la curva de inclinación positiva

Cuando se usa psuedos, el sesgo funciona porque no está compensando un valor sesgado positivamente por una cantidad sesgada de manera reciente.

^* No soy matemático, tanto miedo que solo puedo decir esto como conjetura

Answer 2

El comportamiento del niño "no tachado" es normal, es la forma en que funciona el sesgo. Para entender esto, voy a simplificar la pregunta a:

¿Por qué skewX(40deg) no es lo mismo que 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>

Nota: por el bien de la explicación, usaré un div de 100*100 cuadrados y el origen de la transformación se establece en la esquina superior izquierda de este div. Como en el fragmento de código anterior.

Para comprender la diferencia entre las dos transformaciones, necesitamos explorar la forma en que funciona la función skew () de CSS. Las especificaciones dicen:

Una transformación de desviación 2D a lo largo del eje X con el parámetro alfa es equivalente a la matriz:

Entonces, esto significa que podemos calcular las coordenadas de cada punto de un elemento sesgado X en 2D como este:

| 1 tan(α) | . | x |
| 0   1    |   | y |

• α es el ángulo sesgado X
• x/y las coordenadas del punto antes de la transformación.

Para skewX (40deg)

α = tan(40deg) ~= 0.83

| 1  0.83 | . | 0   |   | 83  |
| 0  1    |   | 100 | = | 100 |

Las nuevas coordenadas son x = 83 como se ve en el ejemplo del fragmento de código.

Para skewX (20deg) skewX (20deg)

α = tan(20deg) ~= 0.36

primer sesgo

| 1  0.36 | . | 0   |   | 36  |
| 0  1    |   | 100 | = | 100 |

Segundo sesgo:

| 1  0.36 | . | 36  |   | 72  |
| 0  1    |   | 100 | = | 100 |

Las nuevas coordenadas son x = 72 como se ve en el fragmento de código.

Conclusión

Ambas transformaciones no dan el mismo resultado. Así que skewY(20deg) skewY(-40deg) no es la misma transformación que skewY(-20deg) y las dos esquinas superiores de los elementos rojo y verde no pueden alinearse como:

tan(20deg) != tan(40deg)/2 

Referencias:

• La matriz CSS3 () Transformación para el Desafío Matemático
• CSS transformar sesgo: matemáticas dio a conocer
• Módulo de Transformaciones CSS Nivel 1

Answer 3

skew introduce un desplazamiento vertical igual a la tangente del ángulo. Por lo tanto, skew (20deg) introduce un desplazamiento de tan (20deg).

Para que tu ejemplo funcione, debería ser ese

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

o

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

Pero esto no es cierto, la tangente y la suma no son asociativas.

El sesgo requerido para revertirlo es

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

que, para x = 20, da un resultado de

36,052388732387908475278040193987

(aproximadamente)

Answer 4

Me referiré al tema principal, en cuanto a por qué sucede, en lugar de intentar ofrecer alternativas.

Dado que su matemática parece ser exacta, tenemos que buscar lo que no es exacto, que es la plataforma en sí ...

El artículo de MDN sobre la transformación afirma que no es una tecnología estable:

Esta es una tecnología experimental.
Debido a que la especificación de esta tecnología no se ha estabilizado , verifique la

(énfasis mío)

Considera lo siguiente:

Cuando sesgas la división principal, se requiere una gran cantidad de cálculos de renderizado del navegador para mostrar en un entorno 2D lo que se vería considerando los 3 ejes ... El pseudoelemento sufre con esos cálculos, como puedes ver si lo avanzas. un poco a la izquierda del borde donde lo has puesto:

Mira, me acabo de mover hacia la izquierda, y eso causó que bajara un poco, de acuerdo con el sesgo en Y aplicado a la división principal. Ahora, agregue otra gran cantidad de cálculos cuando vuelva a sesgar el pseudoelemento ... El navegador no podrá proporcionar una representación precisa de cómo se vería el espacio 3D en un entorno 2D ...