鍍金池/ 問答/HTML5  HTML/ 如何計算skew后的偏移長度？

如何計算skew后的偏移長度？

圖片描述

如何根據偏移角度和長寬計算左上角紅色頂點與綠色頂點之間的距離？

綠色部分

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

紅色部分

    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: red;
    transform: skew(-20deg);
回答
編輯回答
乖乖噠

如圖，∠A，需要根據弧度 -20deg 轉化為 m°，這個請自行百度；
AB，通過計算兩個盒子 ele.getBoundingClientRect().left 的差，可以計算出來；
這兩個算出來后，后面的就按圖計算三角函數(sin/cos/tan/cot)吧，這其實是個數學題，
圖片描述

2018年3月29日 18:55
編輯回答
離夢

抱歉周末不上社區(qū)，現在給你解答一下，不過需要點三角函數的知識。

圖片描述

先把問題轉化一下，就是根據高度h和角度α求長度s

圖片描述

那么我們根據三角函數定義可以列出公式：
圖片描述

默認的話旋轉是以中心為原點的，所以有：
圖片描述

結合起來就是：
圖片描述

用js描述就是

var h = 50, a = 20, s;
var d2r = Math.PI / 180;        // 用于將角度轉換成弧度
s = h * Math.tan(a * d2r) / 2
2018年2月17日 02:27
編輯回答
旖襯

簡單寫了一個，如下

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即為最后的水平偏移
2018年8月2日 06:46