CSS3中的變形處理

最新推荐文章于 2023-03-09 20:05:03 发布

lulu_jiang

最新推荐文章于 2023-03-09 20:05:03 发布

阅读量1.4k

点赞数

分类专栏： CSS3 文章标签： css div

本文链接：https://blog.csdn.net/lulu_jiang/article/details/7818031

版权

CSS3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS3中可利用tansform功能實現文字或圖像的縮放，傾斜，移動，旋轉這4類變形處理

1.縮放

使用scale方法，可分別指定元素水平，垂直方向縮放倍率

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        div{
            width:300px;
            background-color:Yellow;
            -moz-transform:scale(0.5);
            -webkit-transform:scale(0.5);
            -o-transfrom:scale(0.5);
            
            -moz-transform:scale(0.5,2);
            -webkit-transform:scale(0.5,2);
            -o-transfrom:scale(0.5,2);
        }
        </style>
    </head>
    <body>
        <div>哈羅</div>
    </body>
</html>

2.傾斜

使用skew方法實現文字或圖像的傾斜處理，在參數中分別指定水平方向上的傾斜角度與垂直方向上的傾斜角度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        div{
            width:300px;
            margin:100px;
            background-color:Yellow;
            -moz-transform:skew(30deg,30deg);
            -webkit-transform:skew(30deg,30deg);
            -o-transfrom:skew(30deg,30deg);
            /* 只在水平方向上傾斜，垂直方向不傾斜 */
            -moz-transform:skew(30deg);
            -webkit-transform:skew(30deg);
            -o-transfrom:skew(30deg);
        }
        </style>
    </head>
    <body>
        <div>哈羅</div>
    </body>
</html>

3.移動

使用translate方法將文字或圖像進行移動，在參數中分別指定水平方向上的移動距離與垂直方向上的移動距離

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        div{
            width:300px;
            background-color:Yellow;
            -moz-transform:translate(50px,30px);
            -webkit-transform:translate(50px,30px);
            -o-transfrom:translate(50px,30px);
            /* 只在水平方向上移動，垂直方向不移動 */
            -moz-transform:translate(50px);
            -webkit-transform:translate(50px);
            -o-transfrom:translate(50px);
        }
        </style>
    </head>
    <body>
        <div>哈羅</div>
    </body>
</html>

4.旋轉

使用rotate方法，在參數中指定旋轉角度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        div{
            width:300px;
            margin-top:100px;
            background-color:Yellow;
            -moz-transform:rotate(45deg);
            -webkit-transform:rotate(45deg);
            -o-transfrom:rotate(45deg);
        }
        </style>
    </head>
    <body>
        <div>哈羅</div>
    </body>
</html>

對一個元素使用多種變形方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        div{
            width:300px;
            background-color:Yellow;
            -moz-transform:rotate(45deg) scale(1.5) translate(200px,200px);
            -webkit-transform:rotate(45deg) scale(1.5) translate(200px,200px);
            -o-transfrom:rotate(45deg) scale(1.5) translate(200px,200px);
        }
        </style>
    </head>
    <body>
        <div>哈羅</div>
    </body>
</html>

指定變形的基准點

在使用transform方法進行文字或圖像變形是，是以元素的中心點為基準進行的

使用transform-origin屬性可改變基准點

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        div{
            width:300px;
            height:300px;
            display:inline-block;
        }
        #div1{
            background-color:pink;
            -moz-transform:rotate(45deg);
            -webkit-transform:rotate(45deg);
            -o-transform:rotate(45deg);
        }
        #div2{
            background-color:Green;
            -moz-transform:rotate(45deg);
            -webkit-transform:rotate(45deg);
            -o-transform:rotate(45deg);
            /* 修改變形基准點 */
            -moz-transform-origin:left top;
            -webkit-transform-origin:left top;
            -o-transform-origin:left top;
        }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
    </body>
</html>