unskewed孩子不对齐 [英] Unskewed child not aligning

问题描述

请注意：此问题是关于输出问题，不是关于任何形状的创建。

---

我最近创建了一个形状：

  .prog {position：relative; top：20px; width：150px; height：120px;背景：绿色; display：inline-block; transform：skewY（20deg）;转化起点：0％100％; transition：0.8s ease;}。prog：before {content：; position：absolute; left：150px; width：150px; height：120px;背景：红色; transform：skewY（-40deg）;转化起点：0％100％; transition：0.8s ease;}  

 < div class = prog>< / div>  

片段，绿色形状是 .prog 元素，并且是倾斜的。红色形状是：之前伪元素的第一个元素。

我扭曲 .prog （skewY）到20deg。现在，我需要：之前为-20deg。为此，我首先要unskew它。然后将其进一步偏移20deg。

因此，最终 skewY 的值将为-40deg。我应用了这个，并且适当的 transform-origin 。

但问题是<的两个形状都不对齐。他们应该，但他们不是。下面的图片显示了问题：

黑线仅供参考。

>

我扭曲了 -20 -20 -40 ：

transform：skewY（-20deg）skewY < - 这样有效！

transform：skewY（-40deg）; < ---------------- 这不是！


< div=h2_lin>解决方案

unskewed子级的行为是正常的，它是偏斜的工作方式。为了理解这一点，我将简化问题：

为什么不是 skewX ）与相同skewX（20deg）skewX（20deg）？


b $ b

  div {width：100px; height：100px; position：absolute; top：20px; left：20px;变换原点：0 0;}。d1 {transform：skewX（40deg）;背景：红色;不透明度：0.7;} d2 {变换：skewX（20deg）skewX（20deg）;背景：蓝色; opacity：0.7;} / ** for the DEMO ** / body {background：url（'http://i.stack.imgur.com/GySvQ.png'）; background-size：10px;}。 -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> 
注意：为了便于说明，我将使用 100 * 100 方形div和转换原点设置在此div的左上角。像上面的代码段一样。 
 
 
 
 
 
 
为了理解这两种转换的区别， CSS skew（）函数的工作方式。   
 
  CSS变形偏斜：数学揭晓 
 
 
  CSS转换模块级别1  
 
  
Note: This question is about a problem with output, and not about creation of any shape.



I recently created a shape :



.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 the .prog element, and is skewed. The red shape is :before pseudoelement of the first element.

I skewed .prog (skewY) to 20deg. Now, I needed :before to be -20deg. For this, I first had to unskew it. Then skew it further 20deg.

So final skewY value will be -40deg. I applied this, and appropriate transform-origins.

But the problem is that the top points of both the shapes aren't aligning. They should, but they aren't. Here's an image showing the problem : 



The black lines are just for reference.

Now even more!

I skewed -20 -20 instead of -40 :  

transform: skewY(-20deg) skewY(-20deg); <-- This works!

transform: skewY(-40deg); <---------------- This doesn't!
解决方案
The behaviour of the "unskewed" child is normal, it is the way skew works. In order to understand this, I am going to simplify the question to :

  
why isn't skewX(40deg) the same as 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 the sake of explanation I will be using a 100*100 square div and the transform origin is set on the top left corner of this div. Like in the above code snippet.



To understand the difference between the two transformations, we need to explore the way the CSS skew() function works. The specs say :

  
A 2D skew transformation along the X axis with the parameter alpha is
  equivalent to the matrix: 
So this means we can calculate the coordinates of each point of a 2D X skewed element like this :
| 1 tan(α) | . | x |
| 0   1    |   | y |



α is the X skewed angle
x/y the coordinates of the point before transformation




For skewX(40deg)
α = tan(40deg) ~= 0.83

| 1  0.83 | . | 0   |   | 83  |
| 0  1    |   | 100 | = | 100 |
The new coordinates are x = 83 as seen 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 skew :
| 1  0.36 | . | 36  |   | 72  |
| 0  1    |   | 100 | = | 100 |
The new coordinates are x = 72 as seen in the code snippet.



Conclusion

Both transformations don't give the same result. So skewY(20deg) skewY(-40deg) isn't the same transformation as skewY(-20deg) and the two top corners of the red and green elements can't align as :
tan(20deg) != tan(40deg)/2 
References :


The CSS3 matrix() Transform for the Mathematically Challenged
CSS transform skew: math unveiled
CSS Transforms Module Level 1


                        
这篇关于unskewed孩子不对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！