一、CSS3轉換(transform)

css3包括兩種轉換，2D轉換和3D轉換。

css3的轉換允許我們對元素進行旋轉、縮放、移動或傾斜。

不管2D轉換還是3D轉換都是操作的同一個的屬性：transform

1.1 2D轉換

有四種轉換：rotate、scale、translate、skew

1.1.1 translate

在x和y方向平移元素:

transform: translate(500px, 0px);

說明：

參數可以是像素或百分比。

參數1：沿x方向的平移，正表示向右移動

參數2：沿y方向的平移，正表示向下移動

如果是百分比是相對於自己的寬高的百分比。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        div:nth-of-type(2){
            background-color: gray;
            /*沿x軸平移500px， 沿y軸方向不動*/
            transform: translate(500px, 0px);
        }
    </style>
</head>
<body>
<div></div>
<div></div>

</body>
</html>

如果僅僅沿x或y某一個方向運動，也可以使用：

transform:translateX(200px);

或

transform:translateY(200px);

1.1.2 rotate

旋轉元素，是指有沿着 z 軸旋轉。(就是垂直於屏幕的軸）

transform:rotate(10deg);

參數必須是度數。大於0表示順時針旋轉的度數，小於0表示逆時針旋轉的角度。

注意：

旋轉的時候默認是以元素的幾何中心作爲軸來旋轉的。
可以使用 transform-origin: offsetX offsetY;來設置旋轉的時候的軸的位置.

transform-origin: 0 0;

1.1.3 scale

對元素進行放大。

transform: scale(倍數);

注意：

倍數大於表示放大，小於1表示縮小。不需要帶單位

默認任然是元素中心作爲放大或縮小的參考點

transform: scale(.5);

transform-origin: 0 0;
transform: scale(.5);

1.1..4 skew

skew是傾斜（斜切）。讓元素與x方向或y方向產生傾斜。

transform: skew(40deg,10deg);

參數1：x方向的傾斜度數

參數2：y方向的傾斜度數

transform-origin: 0 0;
transform: skew(40deg,10deg);

1.2 3D轉換

想對2D轉換來說，3D轉換瀏覽器支持的不太好。不過在移動端可以放心的使用。

3D座標系：

默認情況水平向右爲x軸正方形、垂直向下爲y軸正方形、垂直於屏幕向外的爲z軸正方形

1.2.1 perspective屬性

perspective（透視）是transform變形3D中最重要的內容。如果不設置透視，元素的3D變形效果將無法實現，所有的變化都會被投影到2D的區域展示。

可以簡單理解爲視距，用來設置用戶和元素 3D 空間 Z 平面之間的距離。而其效應由他的值來決定，值越小，用戶與 3D 空間 Z 平面距離越近，視覺效果更令人印象深刻；反之，值越大，用戶與3D空間Z平面距離越遠，視覺效果就越小。

要把它用在父容器中。

1.2.2 translate3d(x,y,z)

translate3D(x,y,z) 可以在x,y,z三個方向移動。

translateZ(z) 只在z軸平移

1.2.3 rotate3d(x, y, z, a)

3d旋轉。分別表示繞着x，y，z旋轉。參數中的x，y，z是一個數值。a是一個角度。

如果a是正值表示順時針旋轉，如果a是負值表示逆時針旋轉。

x,y,z表示方向矢量，xyz的平方和如果是1的話就是標準矢量，如果不是1就會轉換成一個標準矢量。x,y,z分別分別除以他們的平方和得到的值就是標準矢量。 這三個值決定了將來要旋轉的時候的座標軸。

注意：判斷是順時針還是逆時針，讓逆着座標軸的正放下觀察的。

可以使用rotateX、rotateY、rotateZ表示沿着某個軸的旋轉

rotateX(40deg) 等同於 rotate3d(1,0,0,40deg)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer, .inner {
            margin: 100px auto;
            width: 400px;
            height: 400px;
            background-color: gray;
        }
        .outer {
            perspective: 300px;
        }
        .inner {
            background-color: pink;
            transform: rotateX(45deg);
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="inner"></div>
</div>
</body>
</html>

1.2.4 scale3d(sx, sy, sz)

參數分別表示沿着向相應的座標軸的縮放。注意sz其實是縮放的translateZ的值，如果沒有設置translateZ則sz的值無效的。

scaleX、scaleY、scaleZ分別表示x，y，z方向的縮放。

1.2.5 transform-style

表示他的子元素在變形的時候，是在一個2d平面內變形，還是在一個3d平面內變形。

兩個值：flat和preserve-3d

flat：變形仍然在2d空間

preserve-3d：3d空間內變形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer, .inner {
            margin: 300px auto;
            width: 400px;
            height: 400px;
            background-color: gray;
        }
        .outer {
            transform:rotateY(45deg);
            transform-style: preserve-3d;
        }
        .inner {

            background-color: pink;
            transform:rotateX(60deg);
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="inner"></div>
</div>
</body>
</html>

1.3 正方體案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        div{
            width: 400px;
            height: 400px;
            text-align: center;
            line-height: 400px;
            font-size: 60px;
        }
        .container{

            position: relative;
            border: 1px dashed #000;
            margin: 200px auto;
            transform: rotateY(30deg) rotateX(30deg);
            transform-style: preserve-3d;
            animation: 10s linear 0s infinite reverse my_rotate;
        }
        .container div{
            position: absolute;
        }
        .font{
            background-color: rgba(100, 100, 100, 1);
            transform: translateZ(200px);
        }
        .back{
            background-color: rgba(80, 255, 133, 1);
            transform: rotateY(180deg) translateZ(200px);
        }
        .left{
            background-color: rgba(255, 57, 56, 1);
            transform: rotateY(-90deg) translateZ(200px);
        }
        .right{
            background-color: rgba(25, 37, 170, 1);
            transform: rotateY(90deg) translateZ(200px);
        }
        .up{
            background-color: rgba(232, 255, 204, 1);
            transform: rotateX(90deg) translateZ(200px);
        }
        .down{
            background-color: rgba(94, 255, 56, 1);
            transform: rotateX(-90deg) translateZ(200px);
        }
        @keyframes my_rotate {
            from{
                transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
            }
            to{
                transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="font">前</div>
    <div class="back">後</div>
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="up">上</div>
    <div class="down">下</div>
</div>
</body>
</html>

二、CSS3過渡(transition)

transition屬性定義一個元素兩種狀態之間的過渡。是下面四個屬性的簡寫：

transition-property, transition-duration, transition-timing-function, transition-delay

不同的狀態可以通過僞類像:hover、:active來定義。也可以通過js代碼來動態的改變。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>過渡</title>
    <style>
        .box {
            border: 1px solid #000;
            margin: 100px auto;
            display: block;
            width: 100px;
            height: 100px;
            background-color: #0000FF;
            /*過渡的屬性  過渡時間  過渡函數  延遲時間*/
            transition: width 2s linear 1s;
        }
        .box:hover {
            width: 200px;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

如果想同時定義多個過渡屬性，則可以使用逗號分開。

transition: width 2s linear 1s, height 3s linear 2s;

過渡屬性和過渡週期不能省略。

過渡函數主要有以下幾個值：

如果不設置默認是：ease

transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

延遲時間如果不設置默認是 0s

四、CSS3動畫(animation)

我們在使用 transition實現動畫的時候只能指定要改變的屬性的開始值和結束值，然後在這兩個值之間進行平滑過渡的方式來實現動畫效果，因此不能實現比較複雜的動畫效果

而animation通過定義多個關鍵幀( keyframes )以及定義每個關鍵幀中元素的屬性值來實現更爲複雜的動畫效果。

下面的表格列出了 @keyframes 規則和所有動畫屬性：

屬性	描述	CSS
@keyframes	規定動畫。	3
animation	所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。	3
animation-name	規定 @keyframes 動畫的名稱。	3
animation-duration	規定動畫完成一個週期所花費的秒或毫秒。默認是 0。	3
animation-timing-function	規定動畫的速度曲線。默認是 “ease”。	3
animation-delay	規定動畫何時開始。默認是 0。	3
animation-iteration-count	規定動畫被播放的次數。默認是 1。	3
animation-direction	規定動畫是否在下一週期逆向地播放。默認是 “normal”。	3
animation-play-state	規定動畫是否正在運行或暫停。默認是 “running”。	3
animation-fill-mode	規定對象動畫時間之外的狀態。	3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動畫</title>
    <style>
        div{
            width : 200px;
            height : 200px;
            margin: 200px auto;
            background-color : pink;
            animation-name: my_animation;
            animation-duration: 3s;
            animation-iteration-count: 1;
            animation-direction: reverse;
            animation-delay:2s;
            animation-timing-function: linear;
            animation-fill-mode: both;
        }
        @keyframes my_animation {
            0%{
                width: 200px;
                height: 200px;
            }
            100%{
                width: 600px;
                height: 600px;
            }
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

@keyframes 動畫名{

//定義關鍵幀

}

關鍵幀定義時可以使用from、to、百分比

from表示0%、to表示100%

可以定義很多關鍵幀。20%、30%、…

百分比其實是指的時間完成的百分比。(考慮以前學習過的歸一化的時間)

animation-timing-function可以是以下的關鍵值：
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
也可以是下面的函數：
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
cubic-bezier：貝塞爾曲線。如果提供的關鍵值不是我們想要的，則可以使用貝塞爾曲線定製自己需要的任何速度曲線。可以使用在線工具生成貝塞爾函數。

https://isux.tencent.com/css3/tools.html

例如：

cubic-bezier(0.315, -0.575, 0.680, 1.650)

對應的曲線：

steps(4, end): 表示每兩個關鍵幀中間共需要再填充3個關鍵幀。

CSS動畫相關知識詳解

一、CSS3轉換(transform)

1.1 2D轉換

1.1.1 translate

1.1.2 rotate

1.1.3 scale

1.1..4 skew

1.2 3D轉換

1.2.1 perspective屬性

1.2.2 translate3d(x,y,z)

1.2.3 rotate3d(x, y, z, a)

1.2.4 scale3d(sx, sy, sz)

1.2.5 transform-style

1.3 正方體案例

二、CSS3過渡(transition)

四、CSS3動畫(animation)

.Net 8.0 下的新RPC，IceRPC之試試的新玩法"打洞"

完美替代postman的軟件

Vue mockjs mock.js

關於遊戲付費的一點想法

我通過CKA和CKS啦！

安裝chromadb注意事項

《最新出爐》系列入門篇-Python+Playwright自動化測試-42-強大的可視化追蹤利器Trace Viewer

大數據怎麼學？對大數據開發領域及崗位的詳細解讀，完整理解大數據開發領域技術體系

CSS動畫相關知識詳解

HTML5中新增的文件API和拖拽API詳解

ES6中的Promise深入解析

HTML5新增元素和屬性詳解系列之一

Javascript異常處理機制詳解

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結