css3中移動(dòng)屬性的示例分析-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“css3中移動(dòng)屬性的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css3中移動(dòng)屬性的示例分析”這篇文章吧。

目前創(chuàng)新互聯(lián)已為上1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、蕭縣網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

transform功能

放縮

使用sacle方法實(shí)現(xiàn)文字或圖像的放縮處理，在參數(shù)中指定縮放倍率，比如sacle(0.5)表示縮小50%，例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scale方法使用示例</title>
    <style>
        div {
            width: 300px;
            margin: 150px auto;
            background-color: yellow;
            text-align: center;
            -webkit-transform: scale(0.5);
            -moz-transform: scale(0.5);
            -o-transform: scale(0.5);
        }
    </style>
</head>
<body>
<div>示例文字</div>
</body>
</html>

另外，可以分別指定元素水平方向的放大倍率與垂直方向的放大倍率，例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scale方法使用示例</title>
    <style>
        div {
            width: 300px;
            margin: 150px auto;
            background-color: yellow;
            text-align: center;
            -webkit-transform: scale(0.5,2);
            -moz-transform: scale(0.5,2);
            -o-transform: scale(0.5,2);
        }
    </style>
</head>
<body>
<div>示例文字</div>
</body>
</html>

傾斜

使用skew方法來實(shí)現(xiàn)文字或圖像的傾斜處理，在參數(shù)中分別指定水平方向上的傾斜角度與垂直方向上的傾斜角度，例如”skew(30deg,30deg)”表示水平方向上傾斜30度，垂直方向傾斜30度，例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>skew方法使用示例</title>
    <style>
        div {
            width: 300px;
            margin: 150px auto;
            background-color: yellow;
            text-align: center;
            -webkit-transform: skew(30deg, 30deg);
            -moz-transform: skew(30deg,30deg);
            -o-transform: skew(30deg,30deg);
        }
    </style>
</head>
<body>
<div>示例文字</div>
</body>
</html>

旋轉(zhuǎn)

使用rotate方法將元素進(jìn)行旋轉(zhuǎn)，共一個(gè)參數(shù)“角度”，單位deg為度的意思，正數(shù)為順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)為逆時(shí)針旋轉(zhuǎn)。例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>對元素使用多重變形的示例</title>
    <style>
        div {
            margin: 100px;
            width: 300px;
            background-color: yellow;
            text-align: center;
            -webkit-transform:rotate(30deg);
            -moz-transform:rotate(30deg);
            -o-transform:rotate(30deg);
        }
    </style>
</head>
<body>
<div>示例文字</div>
</body>
</html>

移動(dòng)

使用translate方法來將文字或圖像進(jìn)行移動(dòng)，在參數(shù)中分別指定水平方向上的移動(dòng)距離與垂直方向上的移動(dòng)距離。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>translate方法使用示例</title>
    <style>
        div {
            width: 300px;
            margin: 150px auto;
            background-color: yellow;
            text-align: center;
            -webkit-transform: translate(50px,50px);
            -moz-transform: translate(50px,50px);
            -o-transform: translate(50px,50px);
        }
    </style>
</head>
<body>
<div>示例文字</div>
</body>
</html>

變形示例

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>對元素使用多重變形的示例</title>
    <style>
        div {
            width: 300px;
            background-color: yellow;
            text-align: center;
            -webkit-transform: translate(150px,200px) rotate(45deg) scale(1.5);
            -moz-transform: translate(50px,50px) rotate(45deg) scale(1.5);
            -o-transform: translate(50px,50px) rotate(45deg) scale(1.5);
        }
    </style>
</head>
<body>
<div>示例文字</div>
</body>
</html>

這個(gè)例子是先移動(dòng)，然后旋轉(zhuǎn)，最后放縮

效果：

css3中移動(dòng)屬性的示例分析

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>對元素使用多重變形的示例</title>
    <style>
        div {
            width: 300px;
            background-color: yellow;
            text-align: center;
            -webkit-transform:rotate(45deg) scale(1.5) translate(150px,200px);
            -moz-transform:rotate(45deg) scale(1.5) translate(150px,200px);
            -o-transform: rotate(45deg) scale(1.5) translate(150px,200px);
        }
    </style>
</head>
<body>
<div>示例文字</div>
</body>
</html>

先旋轉(zhuǎn)，然后在放縮，最后移動(dòng)

效果：

css3中移動(dòng)屬性的示例分析

從兩個(gè)示例的運(yùn)行結(jié)果中我們可以看出，元素在兩個(gè)頁面上所處于位置并不相同。我們來看看他們的的詳細(xì)步驟：

第一個(gè)示例：

1）首先向右移動(dòng)150px，向下移動(dòng)200px。

css3中移動(dòng)屬性的示例分析

2）然后旋轉(zhuǎn)45度，并且放大1.5倍。

css3中移動(dòng)屬性的示例分析

第二個(gè)示例：

1）首先旋轉(zhuǎn)45度，并且放大1.5倍。

css3中移動(dòng)屬性的示例分析

2）然后向右移動(dòng)150px，向下移動(dòng)200px。

css3中移動(dòng)屬性的示例分析

以上是“css3中移動(dòng)屬性的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標(biāo)題：css3中移動(dòng)屬性的示例分析-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://muchs.cn/article46/ddcdhg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站設(shè)計(jì)、關(guān)鍵詞優(yōu)化、網(wǎng)站改版、網(wǎng)站導(dǎo)航、網(wǎng)站內(nèi)鏈

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

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