unskewed孩子不对齐

本文介绍了unskewed孩子不对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 请注意：此问题是关于输出问题，不是关于任何形状的创建。 我最近创建了一个形状： .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）; < ---------------- 这不是！ 解决方案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 anglex/y the coordinates of the point before transformationFor 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.36first 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.ConclusionBoth 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)/2References :The CSS3 matrix() Transform for the Mathematically ChallengedCSS transform skew: math unveiledCSS Transforms Module Level 1 这篇关于unskewed孩子不对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！