Web開發學習筆記（35）-CSS3（9）2D和3D的轉換

1）旋轉函數。

知識點

rotate()
rotateX()
rotateY()

在 CSS3 中，使用 rotate 函數能夠讓指定的元素對象繞原點旋轉，主要在二維空間內進行操作。

其語法格式如下所示：

transform: rotate(角度); /*元素按照指定角度旋轉*/

這里的角度可以是正值也可以是負值。正負值意味著什么呢？

同學們可能已經猜到了，正負值意味著不同的旋轉方向，規定參數為正時，順時針旋轉；參數為負時，逆時針旋轉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:50px;
            height:50px;
            margin:20px;
            display:inline-block;
            background-color:chartreuse;
        }
        .c1{
            background-color:#ffe6e6;
            transform:rotate(60deg); /*右旋60°*/
        }
        .c2{
            background-color:#a7c5eb;
            transform:rotate(-60deg);/*左旋60°*/
        }

    </style>
</head>
<body>
    <div class="c1"></div>
    <div></div>
    <div class="c2"></div>
</body>
</html>

rotateX 讓指定元素圍繞橫坐標（X 軸）旋轉。其使用格式如下所示：

transform: rotateX(角度);

rotateY 讓指定元素圍繞縱坐標（Y 軸）旋轉。其實用格式如下所示：

transform: rotateY(角度);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .c1 {
        transform: rotateX(70deg);
      }
      .c2 {
        transform: rotateX(180deg);
      }
      .c3 {
        transform: rotateY(45deg);
      }
      .c4 {
        transform: rotateY(180deg);
      }
    </style>
  </head>
  <body>
    <div>
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
        class="c1"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
        class="c2"
      />
    </div>
    <div>
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
        class="c3"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
        class="c4"
      />
    </div>
  </body>
</html>

沿 X 軸旋轉 180deg 的過程如下所示：

等于縱向縮放

沿 Y 軸旋轉 180deg 的過程如下所示：

等于橫向縮放

rotate 函數：讓指定的元素繞原點旋轉。
rotateX 函數：讓指定的元素繞 X 軸旋轉。
rotateY 函數：讓指定的元素繞 Y 軸旋轉。

（2）移動函數。

知識點

translate()
translateX()
translateY()

translate() 函數能夠重新定位元素坐標，該函數包含兩個參數值，分別用來定位 X 軸和 Y 軸的新坐標。

其語法格式為：

transform: translate(移動值); /*元素按照指定值沿著 X 軸和 Y 軸移動*/
transform: translateX(移動值); /*元素按照指定值沿著 X 軸移動*/
transform: translateY(移動值); /*元素按照指定值沿著 Y 軸移動*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:50px;
            height:50px;
            background-color:#dfabff
        }
        .c1{
            background-color: #844e4e;
            transform: translateX(20px);
        }
        .c2{
            background-color:#985454;
            transform:translateY(20px);
        }
    </style>
</head>
<body>
    <div></div>
    <div class="c1"></div>
    <div class="c2"></div>
</body>
</html>

頁面上有兩個 div 元素塊，使用 transform: translateX(20px) 讓第一個元素塊向 X 軸移動 20 個像素；使用 transform: translateY(30px) 讓第二個元素塊向 Y 軸移動 30 個像素。

使用 translateX 函數時如果為正值則向右移動，反之向左移動；使用 translateY 函數時如果為正值則向下移動，反之向上移動。

（3）縮放函數。

知識點

scale()
scaleX()
scaleY()

scale() 函數能夠縮放元素大小，該函數包含兩個參數，分別用來定義寬和高的縮放比例。

其語法格式為：

transform: scale(縮放倍數); /*元素按照指定值沿著 X 軸和 Y 軸縮放*/
transform: scaleX(縮放倍數); /*元素按照指定值沿著 X 軸縮放*/
transform: scaleY(縮放倍數); /*元素按照指定值沿著 Y 軸縮放*/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        margin: 30px;
      }
      .c1 {
        background-color: rgba(179, 153, 38, 0.651);
      }
      /*沿著 X 和 Y 軸進行縮放*/
      .c2 {
        background-color: #9088d4;
        transform: scale(2);
      }
      /*沿著 X 軸進行縮放*/
      .c3 {
        background-color: #ffe5b9;
        transform: scaleX(2);
      }
      /*沿著 Y 軸進行縮放*/
      .c4 {
        background-color: #1c8181;
        transform: scaleY(2);
      }
    </style>
  </head>
  <body>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
  </body>
</html>

在頁面上有四個 div 元素塊，第一個是寬和高均為 50 個像素的正方形元素塊，我們另外三個元素塊在此基礎上進行縮放。
第二個元素塊使用 transform: scale(2) 讓元素同時沿著 X 軸和 Y 軸擴大 2 倍。
第三個元素塊使用 transform: scaleX(2) 讓元素沿著 X 軸擴大 2 倍。
第四個元素塊使用 transform: scaleY(2) 讓元素沿著 Y 軸擴大 2 倍。

（4）傾斜函數。

知識點

skew()

skew() 函數能夠讓元素傾斜顯示，該函數包括兩個參數值，分別用于定義 X 軸和 Y 軸的傾斜角度。

其語法格式為：

skew(X 軸角度, Y 軸角度)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height:50px;
            margin:30px;
            background-color:#9088d4;
        }
        .c2{
            background-color:rgb(35, 243, 160);
            transform:skew(50deg, 15deg);
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2"></div>
</body>
</html>

（5）矩陣變換函數。

知識點

matrix()

matrix() 是矩陣函數，調用該函數可以非常靈活的實現各種變形效果，它包括 6 個參數值，形成了一個 3×3 的矩陣。通過對矩陣值的定義來實現元素的變形效果。

其語法格式為：

matrix(<number>,<number>,<number>,<number>,<number>,<number>)

在 matrix 函數中，前面四個參數是用來描述線性變換的值，而后兩個參數使用來描述應用這個線性變換的方式。

概念聽起來好復雜，不要慌！我們不需要重新學一遍數學，只要記住下面這一點就可以了。matrix 的參數我們可以按照如下方式來理解：

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

參數 1 和參數 4 相當于是縮放函數；參數 2 和參數 3 相當于是傾斜函數；參數 5 和參數 6 是移動函數。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:100px;
        }
        .container{
            border: 1px solid rgb(186, 233, 19);
        }
        .matrix{
            background-color:#998dfe;
            transform:matrix(1, 0, 0, 1, 50, 50);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="matrix"></div>
    </div>
</body>
</html>

matrix()傳入參數全部是數字，不帶單位。
在上面代碼中，我們有兩對同樣大小的 div 元素，它們是父與子的關系。
我們使用 matrix(1,0,0,1,50,50) 給子元素 div 設置其元素 X 軸和 Y 軸的縮放倍數為 1（也就是元素本來的大小）。
參數 2 和參數 3 為 0，說明沒有傾斜。
參數 5 和參數 6 為 50，說明向 X 軸和 Y 軸移動 50 個像素。

TML中的span標記和div標記

在使用css排版網頁時，span和div常用的兩個的標記。利用這個兩個標記，加上css樣式控制，可以實現很復雜的網頁效果，下面為大家詳細講解一下他們區別和使用。

span和div概念區別和相似點

div標記是html3.0時提出來的，但是不常用，直到css的出現才慢慢變得應用廣泛起來。HTML4.0以后span才被引入，主要針對樣式表設計的。div與之間可以理解成一個容器，這個容器可以放段落、標題、圖片等各種HTML元素。div與之前的內容可看做一個獨立內容的對象，對于css的控制。先需要對div控制，再對div中各標記的元素再進行控制。

span標記與div標記一樣，作為容器標記廣泛應用在HTML中。span與中間同樣可以容納各種html元素，span與中間也可以視為獨立的對象。span和div兩個標記都可以獨立出區塊，這一點沒有很大的區別。

span和div功能區別

span和div區別在于，div是一個塊級元素，它包含的元素會自動換行。而span是行內元素，在它的前后不會換行。span沒有結構上的意義，只是單純的應用樣式，其他元素不適合時，就可以使用span元素。span可以作為div的子元素，但div不能是span的子元素，如果出現span中出現div不符合ws3c的頁面標準。

span和div使用區別

span元素寬度是被包圍的內容寬度決定，不建議給span設置寬度屬性width，可以給span設置margin值，設置與父元素之前的距離。span可以通過css聲明（display:block）轉換為塊元素，想對一行中的文字或圖片單獨設置樣式，而又由不需要換行的條件下又不影響其他行內其他內容，span可以很好解決這些問題。

每天一個知識點，每日寄語“不論你在什么時候開始，重要的是開始之后就不要停止。”

能邏輯介紹：

管理員通過數據庫添加部門數據，前端通過觸發部門管理icon，列出已經添加的部門數據。

1：首先創建數據表信息，

我們重點是學會整體思路，避免過多參數復雜了理解，簡單點，就先創建兩個字段，一個部門id，一個部門名稱。

我們在其插入幾條數據，數據庫建表語句：

SET NAMES utf8;

SET FOREIGN_KEY_CHECKS = 0;

DROP TABLE IF EXISTS `department`;

CREATE TABLE `department` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,

PRIMARY KEY (`id`) USING BTREE

) ENGINE = InnoDB AUTO_INCREMENT = 7 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

INSERT INTO `department` VALUES (1, '部門1');

INSERT INTO `department` VALUES (2, '部門2');

INSERT INTO `department` VALUES (3, '部門3');

INSERT INTO `department` VALUES (4, '部門4');

INSERT INTO `department` VALUES (5, '部門5');

INSERT INTO `department` VALUES (6, '部門6');

SET FOREIGN_KEY_CHECKS = 1;

前端在templates下創建homepage.html。用于加載首頁。

首頁布局暫定為左右結構，也就是模塊按鈕定義在側邊欄位置，右側區域動態加載各個模塊內容。

在homepage.html實現兩個div：

<div class="sidebar">
  <a href="#" class="menu-item" id="home"><i class="fa fa-home"></i> 首頁</a>
  <a href="#" class="menu-item" id="departments"><i class="fa fa-building"></i> 部門管理</a>
</div>
<div class="content">
  <h1 class="page-title">歡迎來到自動化測試平臺</h1>
  <div id="content-section">
    <!-- 動態內容被加載到這里 -->
  </div>
</div>

點擊部門管理后請求后端路由函數/departments.

后端在index.py函數內創建departments路由用于轉發到部門管理頁面。

@app.route('/departments')
def departments():
    return render_template('departments.html')

然后在前端在templates下創建繼續departments.html前端界面，此界面

通過ajax請求后臺數據信息，加載到前端界面進行展示。

定義一個table，其中包含一個tbody和一個thead。

thead是表格頭部信息，tbody對應頭部信息的真實數據。

<table class="table table-bordered table-striped">
    <thead>
    <tr>
        <th>部門 ID</th>
        <th>部門名稱</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

ajax請求函數實現：

<script>
    $(document).ready(function () {
        $(document).ready(function () {
            $.ajax({
                url: '/get-departments',
                type: 'GET',
                success: function (res) {
                    let departments = res.departments;
                    for (let department of departments) {
                        $('table tbody').append(`
              <tr>
                  <td>${department.id}</td>
                  <td>${department.name}</td>
              </tr>
          `);
                    }
                },
                error: function (err) {
                    console.error('獲取部門數據失敗', err);
                }
            });
        });
    });
</script>

ajax請求的url為后端請求數據路由，因為是向服務端獲取數據顯示，請求type為get。

此時在后端casecommon.py實現/get-departments路由函數。

此函數需要連接數據庫，執行sql查詢，將所有數據轉換為json格式，返回給前端用于展示。

為了后面查詢數據，這里我將數據庫查詢封裝在dbbase.py文件中。此文件類名為DBbase。

數據庫連接操作為：

查詢sql封裝為：

/get-departments路由函數具體實現為：

from flask import jsonify
from app.dbbase import DBbase
db = DBbase()
from app import app
@app.route('/get-departments', methods=['GET'])
def get_departments():
    # mycursor.execute("SELECT id, name FROM department")
    # departments = mycursor.fetchall()
    sql = "SELECT id, name FROM department"
    departments = db.select_data(sql)
    departments_list = [{'id': d[0], 'name': d[1]} for d in departments]
    return jsonify({'departments': departments_list})

將查詢到的整個departments重新組裝數據，每條部門數據裝在列表中。

原始查詢后departments數據形式{{}，{}，{}}。組裝后的形式為

{ "departments":

[ {"id": 1, "name": "部門1"}, {"id": 2, "name": "部門2"}, {"id": 3, "name": "部門3"}, ... ]

}。

將此數據賦值給departments_list。在通過jsonify轉換為json格式進行返回給前端。

那么這整個數據的key即為departments，value即為一個裝載每條部門信息數據的列表。

前端接收到數據后，jquary會默認將其轉換為前端可識別的數據形式。這時候在將數據進行拆分，定義一個res參數用來接收全部數據，在定義一個參數將value值全部獲取賦給departments。此時departments數據結構為

[ {"id": 1, "name": "部門1"}, {"id": 2, "name": "部門2"}, {"id": 3, "name": "部門3"}, ...]

遍歷departments，for-of循環遍歷res.departments數組，每次循環中的變量department都是一個表示部門的對象，你可以直接訪問department.id和department.name來獲取部門的ID和名稱。在找到界面所有的tbody將其append進去。

在函數的主運行入口定義以下內容：

from http import server
from urllib import request
from app import app
if __name__ == '__main__':
    app.run(host="0.0.0.0", debug=True,port=9555)
    server.logger.info('info log')
    server.logger.info('【請求的方法】{}【請求路徑】{}【請求地址】{}'.format(request.method, request.path, request.remote_addr))

運行后界面展示：

整體部門管理完整實現流程如上。

下一節：項目管理模塊實現，敬請期待。

在線咨詢

上一篇：一篇文章搞明白CORS跨域
下一篇：數據采集代碼實戰

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Web開發學習筆記（35）-CSS3（9）2D和3D的轉換

知識點

知識點

知識點

知識點

知識點

您的項目需求