Unmarked baby does not level

Question

Note. This question is about the exit problem and not about creating any form.

---

I recently created a form:

.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> 

In the above snippet, the green shape is a .prog element and is distorted. The red shape is :before pseudo-element of the first element.

I .prog (skewY) to 20deg. Now I needed :before be -20deg. To do this, I first had to untie him. Then skew it another 20 degrees.
So the final skewY value will be -40deg. I applied this and applied transform-origin s.

But the problem is that the top points of both figures do not align . They must, but it is not. Here is an image showing the problem:

The black lines are for reference only.

Now even more!

I skewed -20 -20 instead of -40 :

transform: skewY(-20deg) skewY(-20deg); <-- It works!
transform: skewY(-40deg); <---------------- This is not so!

Answer 1

The behavior of an "unskilled" child is normal, this is how the bias works. To understand this, I'm going to simplify the question:

why doesn't skewX(40deg) match 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> 

Note: for explanation, I will use a square div 100*100 , and the start of the conversion will be set in the upper left corner of this div. Like in the code snippet above.

---

To understand the difference between the two transforms, we need to learn how CSS skew () works. Specifications say:

The two-dimensional oblique transformation along the X axis with the parameter alpha is equivalent to the matrix:

So this means that we can calculate the coordinates of each point of the skewed 2D X element as follows:

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

• α is the angular angle X
• x/y coordinates of the point before conversion

---

For skewX (40deg)

 α = tan(40deg) ~= 0.83 | 1 0.83 | . | 0 | | 83 | | 0 1 | | 100 | = | 100 | 

The new coordinates are x = 83 , as shown in the code snippet example.

---

For skewX (20deg) skewX (20deg)

 α = tan(20deg) ~= 0.36 

first skew:

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

Second bias:

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

The new coordinates are x = 72 , as shown in the code snippet.

---

Conclusion

Both conversions do not produce the same result. So, skewY(20deg) skewY(-40deg) is not the same conversion as skewY(-20deg) , and the two top corners of the red and green elements cannot be aligned as:

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

References:

• CSS3 Matrix () Conversion for mathematically challenged
• CSS transform skew: math unveiled
• CSS Transforms Module Level 1

Answer 2

skew introduces a vertical offset equal to the tangent of the angle. So skew (20deg) introduces the offset tan (20deg).

For your example to work, it must be that

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

or

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

but this is not true, the tangent and the sum are not associative

required skew to change it

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

that for x = 20 gives the result

36.052388732387908475278040193987

(about,)

Answer 3

As a revision of my initial answer, as a result of which a conclusion was drawn, rather than an explanation, I would postulate ^* that the effect is manifested because you assume a negative bias, which can be used to compensate for the position on the positive curve, when actually minus the values ​​that you use on the negative curve.

First, it would be necessary for the skew measure to be singular and occur on the same curve (see normal curve below) with positive and negative values ​​that allow shifting along the curve.

However, the curve for negative and positive skews is reversed by the tail.

Zero skew is the only value that affects both. So, if you have an element, apply a skew of 20 degrees to it, and then apply a skew of minus 20, you will actually have oblique (positive or negative) values ​​of zero, so using a negative bias will work ..

However, if you then apply an additional negative skew, you will have a negatively distorted element, the curve for which is different and not equal to the inverse equivalent position on the positive curve.

20deg = Original element, 20deg on a positive oblique curve

20deg - 20deg = 0, same for positive and negative oblique curve

-40deg = taking current elements 20deg skew, minus 40 deg = 20deg on the negative oblique curve - NOT the equivalent "opposite" point on the positive oblique curve

When using psuedos, skew works because you arent compensating for the positively distorted value with a new distorted amount.

^* I'm not a mathematician, so I'm afraid I can only state this as a hypothesis

Answer 4

I will simply address the main issue of why this is happening, rather than trying to provide alternatives

Since your math seems accurate, we must look for something that is not exact, which is the platform itself ...

The MDN conversion article claims this is not a stable technology:

This is an experimental technology.
Since this technology specification has not stabilized, check

(my accent)

Consider the following:

When you bend the main div, it requires a huge amount of calculations for rendering the browser in a 2D environment, as it would look, considering 3 axes ... The pseudo-element suffers from these calculations, as you can see, you are still a little bit off the edge, where did you put it:

See that I just moved to the left, and it made him go down a bit, according to the warp Y applied to the main div. Now add another huge amount of computation when you skew the pseudo-element ... The browser simply cannot provide accurate rendering of what 3D space will look like in a 2D environment ...