使人頭疼的skew()傾斜函數之我見

時間 2020-07-21

標籤使人頭疼 skew 傾斜函數简体版

原文原文鏈接

一、背景

    今天學習了下CSS3新增的變形：transform屬性及2D變換，其餘的諸如translate、scale、rotate都很好理解，除了skew()這個函數，讓我頭疼了一個多小時。
    MDN是這樣解釋的：skew()函數定義了一個元素在二維平面上的傾斜轉換。它的結果是一個transform-function 數據類型,這種轉換是一種剪切映射(橫切)，它在水平和垂直方向上將單元內的每一個點扭曲必定的角度。每一個點的座標根據指定的角度以及到原點的距離，進行成比例的值調整；所以，一個點離原點越遠，其增長的值就越大。
    乍一看徹底不知所云，因此仍是直接上代碼，仔細研究skew的規律:
瀏覽器

二、「X軸傾斜」驗證

<body>
    <div></div>
</body>
複製代碼

首先，在body中創建一個div盒子，以下是div的CSS代碼：
bash

div {
    position: relative;
    margin-top: 100px;
    margin-left: 100px;
    width: 200px;
    height: 200px;
    background-color: pink;
    border: 1px solid black;
    transform: skew(30deg, 0);
}
複製代碼

即「X軸方向30°傾斜」獲得的形狀以下：函數

將skew(30deg,0)更改成將skew(-30deg,0)，再看看發生了什麼：

2.1在F12裏調試了大半天，結合這兩張圖，我得出的結論是：

一、所謂X軸傾斜，無非就是盒子發生height方向的扭曲，盒子上點以各自X值、盒子垂直中線上的點爲旋轉中心旋轉了對應角度從而扭曲了圖形。
二、傾斜角度爲正時，盒子上的點以垂直中線上的點逆時針旋轉相應角度，盒子的border-left和border-right顯示出了旋轉方向和角度。
三、顯然，傾斜角度爲負時全部點是順時針旋轉的.
四、當傾斜角度爲90deg的奇數倍時，整個圖像會扭成一條水平方向的直線（能夠想象一下圖中的角度變成90的樣子），但瀏覽器並不會顯示出來，當傾斜角度爲90deg的偶數倍時，盒子形狀又會還原
學習

三、「Y軸傾斜」驗證

下面是Y軸傾斜部分的驗證，代碼與Part2基本一致，只更換了transform：skew()值：spa

<style>
        div {
            position: relative;
            margin-top: 100px;
            margin-left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 1px solid black;
            transform: skew(0deg, 30deg);
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

複製代碼

獲得圖形以下：
調試

試試負值transform: skew(0deg, -30deg);會怎麼樣？

3.1結合F12調試狀況，我得出的結論是：

一、所謂Y軸傾斜，是盒子發生width方向的扭曲，盒子上點以各自Y值、盒子水平中線上的點爲旋轉中心旋轉了對應角度從而扭曲了圖形。
二、Y傾斜角度爲正時，盒子上的點以水平中線上的點順時針旋轉相應角度，盒子的border-top和border-bottom顯示出了旋轉方向和角度。
三、顯然，傾斜角度爲負時全部點是逆時針旋轉的.
四、當傾斜角度爲90deg的奇數倍時，整個圖像會扭成一條豎直方向的直線（能夠想象一下圖中的角度變成90的樣子），但實際在瀏覽器並不會顯示出來，當傾斜角度爲90deg的偶數倍時，圖像形狀又會還原
code