CSS3 2D轉換

時間 2020-08-12

標籤 css3 css 2d 轉換欄目 CSS 简体版

原文原文鏈接

1、2D轉換html

轉換（transform）是CSS3中具備顛覆性的特徵之一，能夠實現元素的位移、旋轉、縮放等效果動畫

轉換（transform）你能夠簡單理解爲變形ui

移動：translate
旋轉：rotate
縮放：scalespa

1.1 二維座標系code

2D轉換是改變標籤在二維平面上的位置和形狀的一種技術orm

1.2 2D 轉換之移動 translathtm

2D移動是2D轉換裏面的一種功能，能夠改變元素在頁面中的位置，相似定位。blog

1. 語法 it

　　transform: translate(x,y); 或者分開寫 io

　 transform: translateX(n);

　　 transform: translateY(n);

2. 重點

1>定義 2D 轉換中的移動，沿着 X 和 Y 軸移動元素
2>translate最大的優勢：不會影響到其餘元素的位置
3>translate中的百分比單位是相對於自身元素的 translate:(50%,50%);
4>對行內標籤沒有效果

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 移動盒子的位置： 定位   盒子的外邊距  2d轉換移動 */
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* x就是x軸上移動位置 y 就是y軸上移動位置 中間用逗號分隔*/
            /* transform: translate(x, y); */
            /* transform: translate(100px, 100px); */
            /* 1. 咱們若是隻移動x座標 */
            /* transform: translate(100px, 0); */
            /* transform: translateX(100px); */
            /* 2. 咱們若是隻移動y座標 */
            /* transform: translate(0, 100px); */
            /* transform: translateY(100px); */
        }
        
        div:first-child {
            transform: translate(30px, 30px);
        }
        
        div:last-child {
            background-color: purple;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

1.3 2D 轉換之旋轉 rotate

　　2D旋轉指的是讓元素在2維平面內順時針旋轉或者逆時針旋轉。

1. 語法

　　transform:rotate(度數)

2. 重點

　　1>rotate裏面跟度數，單位是 deg 好比 rotate(45deg)
　　2>角度爲正時，順時針，負時，爲逆時針
　　3>默認旋轉的中心點是元素的中心點

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            width: 150px;
            /* 順時針旋轉45度 */
            /* transform: rotate(45deg); */
            border-radius: 50%;
            border: 5px solid pink;
            /* 過渡寫到自己上，誰作動畫給誰加 */
            transition: all 0.3s;
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <img src="media/pic.jpg" alt="">
</body>

</html>

三角形例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }
        
        div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.2s;
        }
        /* 鼠標通過div  裏面的三角旋轉 */
        
        div:hover::after {
            transform: rotate(225deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

1.4 讓盒子水平垂直居中

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 1. 咱們tranlate裏面的參數是能夠用 % */
            /* 2. 若是裏面的參數是 % 移動的距離是 盒子自身的寬度或者高度來對比的 */
            /* 這裏的 50% 就是 50px 由於盒子的寬度是 100px */
            /* transform: translateX(50%); */
        }
        
        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            /* margin-top: -100px;
            margin-left: -100px; */
            /* translate(-50%, -50%)  盒子往上走本身高度的一半   */
            transform: translate(-50%, -50%);
        }
        
        span {
            /* translate 對於行內元素是無效的 */
            transform: translate(300px, 300px);
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
    <span>123</span>
</body>

</html>

1.5 2D 轉換中心點 transform-origin

咱們能夠設置元素轉換的中心點

1. 語法

　　transform-origin: x y;

2. 重點

　　1>注意後面的參數 x 和 y 用空格隔開
　　2>x y 默認轉換的中心點是元素的中心點 (50% 50%)
　　3>還能夠給x y 設置像素或者方位名詞（top bottom left right center）

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 1s;
            /* 1.能夠跟方位名詞 */
            /* transform-origin: left bottom; */
            /* 2. 默認的是 50%  50%  等價於 center  center */
            /* 3. 能夠是px 像素 */
            transform-origin: 50px 50px;
        }
        
        div:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

1.6 2D 轉換之縮放scale

　　縮放，顧名思義，能夠放大和縮小。只要給元素添加上了這個屬性就能控制它放大仍是縮小。

1. 語法　　

　　transform:scale(x,y);

2. 注意

　　1>注意其中的x和y用逗號分隔
　　2>transform:scale(1,1) ：寬和高都放大一倍，相對於沒有放大
　　3>transform:scale(2,2) ：寬和高都放大了2倍
　　4>transform:scale(2) ：只寫一個參數，第二個參數則和第一個參數同樣，至關於 scale(2,2)
　　5>transform:scale(0.5,0.5)：縮小
　　6>sacle縮放最大的優點：能夠設置轉換中心點縮放，默認以中心點縮放的，並且不影響其餘盒　

分頁按鈕案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        li {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid pink;
            margin: 10px;
            text-align: center;
            line-height: 30px;
            list-style: none;
            border-radius: 50%;
            cursor: pointer;
            transition: all .4s;
        }
        
        li:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

</html>

1.7 2D 轉換綜合寫法

注意：

1. 同時使用多個轉換，其格式爲：transform: translate() rotate() scale() ...等，2. 其順序會影轉換的效果。（先旋轉會改變座標軸方向）3. 當咱們同時有位移和其餘屬性的時候，記得要將位移放到最前

相關標籤/搜索

每日一句

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