CSS3中的skew（）屬性

本文轉載自查看原文 2016-09-23 11:18 27032

剛開始接觸CSS3的2D變換屬性，就被這個skew（）搞的一頭霧水，不知道具體是怎么變化的！

研究了一會才發現，CSS3的斜切坐標系和數學中的坐標系完全不一樣（設置斜切原點為左上角）

<style>
div{
            width: 200px;
            height: 200px;
            transition:all 2s;
            margin: 150px auto;
        }
.div1{
        background-color: #f00;
    }
.div2{
        background-color: #0f0;
    }
</style>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>

下面我們設置鼠標經過時的skew（0，30deg）屬性

.div1:hover {
            transform:skew(0,30deg);
            transform-origin: left top;
        }

移入前

移入后

通過兩幅圖可以看出，skew（0，30deg）；是按照水平方向Y軸，順時針旋轉　　

下面我們設置鼠標經過時的skew（30deg，0）屬性

.div2:hover {
            transform:skew(30deg,0);
            transform-origin: left top;

        }

移入前

移入后

通過兩幅圖可以看出，skew（30deg，0）；是按照垂直方向X軸，逆時針旋轉

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css3中的skew(skewX,skewY)用法圖形解析理解 css3 之傾斜屬性skew() CSS3 transform的skew屬性值圖文詳解 CSS3 transform 屬性詳解(skew, rotate, translate, scale) CSS中transform：skew屬性理解 css3系列之transform 詳解skew CSS3中動畫transform必須要了解的Skew變化原理 css3中clip屬性 CSS3 skew傾斜、rotate旋轉動畫 CSS3的2D 轉換——旋轉，縮放，translate()，skew()，matrix()