認識CSS3特性之轉換

時間 2019-11-19

標籤認識 css3 css 特性轉換欄目 CSS 简体版

原文原文鏈接

前端之HTML5，CSS3（四）

　　轉換(transform)

　　經過 CSS3 轉換，咱們可以對元素進行移動、縮放、轉動、拉長或拉伸，即轉換是使元素改變形狀、尺寸和位置的一種效果。css

　　2D 轉換

　　2D轉換是指二維平面轉換，表示操做改變元素的x軸和y軸座標。轉換方法有：移動(translate)、旋轉(rotate)、縮放(scale)、傾斜(skew)html

　　translate()

　　translate(x,y)表示元素向右移動x距離，向下移動y距離。其中x，y能夠爲負值，表示向左移動x的絕對值的距離，向上移動y的絕對值的距離。前端

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2D 轉換-測試</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            transform: translate(20px,50px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

　　效果展現ide

　　rotate()　

　　rotate(n)表示元素順時針旋轉n度，其中n能夠爲負值，表示元素逆時針旋轉n度。測試

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2D 轉換-測試</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 100px auto;
            transform: rotate(30deg); /*deg是單位度的表示，相似於像素的表示px*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

　　效果展現spa

　　注意：能夠經過transform-origin:mpx npx;設置旋轉元素的中心點，即按照座標爲(m,n)的點進行旋轉，默認旋轉中心爲規則圖形的幾何中心，不規則圖形的重心。code

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>2D 轉換-測試</title>
 6     <style type="text/css">
 7         div {
 8             width: 100px;
 9             height: 100px;
10             background-color: skyblue;
11             margin: 100px auto;
12             transform: rotate(20deg);
13             transform-origin: right bottom;  /*設置旋轉中心爲右下角，默認旋轉中心爲元素幾何中心*/
14         }
15     </style>
16 </head>
17 <body>
18     <div></div>
19 </body>
20 </html>

View Code

　　　scale()

　　scale(m,n)表示元素的寬度放大m倍，高度放大n倍，其中m，n能夠爲負值，表示寬度縮小m倍，高度縮小n倍。orm

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2D 轉換-測試</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 100px auto;
            transform: scale(-.5,2); 
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

　　效果展現htm

　　skew()

　　skew(m,n)表示元素向左傾斜m度，向下傾斜n度，其中m，n能夠爲負值，表示向右傾斜m度，向上傾斜n度。blog

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2D 轉換-測試</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 100px auto;
            transform: skew(0deg,20deg); 
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

　　效果展現

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。