css3中skew()屬性的用法-創新互聯

這篇文章主要介紹了css3中skew()屬性的用法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

成都創新互聯公司是一家專業提供璧山企業網站建設,專注與網站設計制作、成都網站建設、H5技術、小程序制作等業務。10年已為璧山眾多企業、政府機構等服務。創新互聯專業網絡公司優惠進行中。

在css3中，skew()是一個傾斜屬性，需要和transform屬性一起使用，可以改變元素在頁面中的形狀，讓元素沿著X和Y軸進行2D傾斜轉換；語法“transform:skew(x,y)”。

css3傾斜屬性skew()

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

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

css3中skew()屬性的用法

Transform屬性應用于元素的2D或3D轉換。這個屬性允許你將元素旋轉，縮放，移動，傾斜等。

而skew(x-angle,y-angle) ：定義沿著 X 和 Y 軸的 2D 傾斜轉換。

示例：

<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;
        }

移入前

css3中skew()屬性的用法

移入后

css3中skew()屬性的用法

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

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

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

        }

移入前

css3中skew()屬性的用法

移入后

css3中skew()屬性的用法

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

感謝你能夠認真閱讀完這篇文章，希望小編分享css3中skew()屬性的用法內容對大家有幫助，同時也希望大家多多支持創新互聯網站建設公司，，關注創新互聯行業資訊頻道，遇到問題就找創新互聯網站建設公司，，詳細的解決方法等著你來學習!

網站題目：css3中skew()屬性的用法-創新互聯
分享鏈接：http://m.kartarina.com/article42/ccghhc.html

成都網站建設公司_創新互聯，為您提供品牌網站制作、網站維護、網站改版、品牌網站建設、軟件開發、搜索引擎優化

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容