如何计算skew后的偏移长度？

Question

如何根据偏移角度和长宽计算左上角红色顶点与绿色顶点之间的距离？

绿色部分

    width: 200px;
    height: 50px;
    position: relative;
    background: lightgreen;

红色部分

    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: red;
    transform: skew(-20deg);

Answer 1

抱歉周末不上社区，现在给你解答一下，不过需要点三角函数的知识。

先把问题转化一下，就是根据高度h和角度α求长度s

那么我们根据三角函数定义可以列出公式：

默认的话旋转是以中心为原点的，所以有：

结合起来就是：

用js描述就是

var h = 50, a = 20, s;
var d2r = Math.PI / 180;        // 用于将角度转换成弧度
s = h * Math.tan(a * d2r) / 2

Answer 2

如图，∠A，需要根据弧度 -20deg 转化为 m°，这个请自行百度；
AB，通过计算两个盒子 ele.getBoundingClientRect().left 的差，可以计算出来；
这两个算出来后，后面的就按图计算三角函数(sin/cos/tan/cot)吧，这其实是个数学题，

Answer 3

简单写了一个，如下

var height = 100;//这是方块的高度
var transform = $('#xxx').css('transform');//xxx为红色元素选择器
var rate = transform.match(/matrix\([^)]*\)/g);
if (rate && rate[0]) {
  rate = rate[0].split(',')[2];
}
var distance = Math.abs(height*rate/2);//distance即为最后的水平偏移