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的转换

知识点

知识点

知识点

知识点

知识点

您的项目需求