css3中skew()屬性的用法-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供璧山企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為璧山眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進行中。

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

css3傾斜屬性skew()

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

研究了一會才發(fā)現(xiàn)，CSS3的斜切坐標系和數(shù)學(xué)中的坐標系完全不一樣（設(shè)置斜切原點為左上角）

css3中skew()屬性的用法

Transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個屬性允許你將元素旋轉(zhuǎn)，縮放，移動，傾斜等。

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

示例：

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

下面我們設(shè)置鼠標經(jīng)過時的skew（0，30deg）屬性

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

移入前

css3中skew()屬性的用法

移入后

css3中skew()屬性的用法

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

下面我們設(shè)置鼠標經(jīng)過時的skew（30deg，0）屬性

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

        }

移入前

css3中skew()屬性的用法

移入后

css3中skew()屬性的用法

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

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

網(wǎng)站題目：css3中skew()屬性的用法-創(chuàng)新互聯(lián)
分享鏈接：http://www.rwnh.cn/article42/ccghhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站維護、網(wǎng)站改版、品牌網(wǎng)站建設(shè)、軟件開發(fā)、搜索引擎優(yōu)化

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

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

css3中skew()屬性的用法-創(chuàng)新互聯(lián)