CSS3 轉換

2D位移轉換

參考點（基點）在元素的中心點
相對自身參考點進行位移
位移設置成百分比後，是自身元素尺寸的百分比，元素的尺寸是否固定不會影響百分比的計算
transform: translateX(-150px); X軸：正往右，負往左
transform: translateY(150px); Y軸：正往下，負往上
transform: translate(100px, 100px); 2D位移簡寫，值1是X軸，值2是Y軸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標題</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: #ccc;
            margin:50px auto;
        }
        .sBox{
            width: 100px; height: 100px; background: red;
            /* transform: translateX(-150px); */
            /* transform: translateY(-100px); */

            /* transform: translateX(50%); */

            /* 2D位移簡寫，值1是X軸，值2是Y軸 */
            transform: translate(100px, 100px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sBox"></div>
    </div>
</body>
</html>

視距

視距：眼睛距顯示器距離，所以視距要大於Z軸距離
視距屬於transform的前置屬性，寫在父元素中
視距值越大，變化越小，視距值越小，變化越大
視距的默認值爲：無窮大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標題</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: #ccc;
            margin:50px auto; 
            /* 視距：眼睛距顯示器距離，所以視距要大於Z軸距離 */
            perspective: 200px;
        }
        .sBox{
            width: 100px; height: 100px; background: red;
        }
        .sBox:hover{
            /* Z軸：正往前，負往後 */
            transform: translateZ(-150px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sBox"></div>
    </div>
</body>
</html>

3D位移轉換

Z軸方向位移不能設置百分比
transform: translateZ(-150px); Z軸：正往前，負往後
transform: translate3d(100px, 100px, 200px); 3D位移簡寫：值1是X軸，值2是Y軸，值3是Z軸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標題</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 100px; height: 100px; background: #ccc;
            margin:50px auto; 
            /* 視距：眼睛距顯示器距離，所以視距要大於Z軸距離 */
            perspective: 300px;
        }
        .sBox{
            width: 100px; height: 100px; background: red;
        }
        .sBox:hover{
            /* Z軸：正往前，負往後 */
            /* transform: translateZ(-150px); */

            /* 3D位移簡寫：值1是X軸，值2是Y軸，值3是Z軸 */
            transform: translate3d(100px, 100px, 200px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sBox"></div>
    </div>
</body>
</html>

縮放轉換

縮放轉換：元素放大縮小
值：比例，參考自身尺寸
默認的基點在元素中心點
默認值爲1，當值小於1時，表示縮小，大於1表示放大
設置Z軸要在3D環境中
當值爲負時，元素會翻轉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標題</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 200px; height: 200px; background: #ccc;
            margin:50px auto; 
            perspective: 500px;
        }
        .sBox{
            width: 100px; height: 100px; background: red;
        }
        .sBox:hover{
            /* 縮放轉換：元素放大縮小 */
            /* 值：比例，參考自身尺寸 */
            /* 默認的基點在元素中心點 */
            /* 默認值爲1，當值小於1時，表示縮小，大於1表示放大 */
            transform: scaleX(2);
            transform: scaleX(0.5);

            transform: scaleY(2);
            transform: scaleY(0.5);

            /* 沒有Z軸沒有厚度不能設置Z軸 */
            /* transform: scaleZ(2) ; */

            /* 設置一個角度後，就有厚度了，就可以設置Z軸了 */
            transform: rotateY(45deg);
            transform: scaleZ(3) rotateY(45deg);

			 /* X,Y軸同時縮放：值1是X軸，值2是Y軸 */
            transform: scale(2, 3);
            /* X,Y軸同時縮放相同比例 */
            transform: scale(2);
            /* X,Y,Z軸縮放：值1是X軸，值2是Y軸，值3是Z軸 */
            transform: scale(2, 3, 4);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sBox"></div>
    </div>
</body>
</html>

2D角度轉換

角度轉換：元素轉一個角度
值：角度deg；正負值方向相反
默認的基點在元素的中心點
2D角度轉換，繞Z軸旋轉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標題</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 200px; height: 200px; background: #ccc;
            margin:50px auto; 
            perspective: 500px;
        }
        .sBox{
            width: 200px; height: 200px; background: red;
        }
        .sBox:hover{
           transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sBox"></div>
    </div>
</body>
</html>

3D角度轉換

transform: rotateX(45deg); transform: rotateX(-45deg);

繞X軸旋轉，旋轉的角度是與Y軸的夾角
正值元素上遠離，元素下靠近
負值元素上靠近，元素下遠離

transform: rotateY(45deg); transform: rotateY(-45deg);

繞Y軸旋轉，旋轉的角度是與Z軸的夾角
正值元素右遠離，元素左靠近
負值元素右靠近，元素左遠離

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標題</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 200px; height: 200px; background: #ccc;
            margin:50px auto; 
            perspective: 500px;
        }
        .sBox{
            width: 200px; height: 200px; background: red;
        }
        .sBox:hover{
            /* 繞X軸旋轉，旋轉的角度是與Y軸的夾角
            正值元素上遠離，元素下靠近
            負值元素上靠近，元素下遠離 */
            /* transform: rotateX(45deg); */
            /* transform: rotateX(-45deg); */

            /* 繞Y軸旋轉，旋轉的角度是與Z軸的夾角
            正值元素右遠離，元素左靠近
            負值元素右靠近，元素左遠離 */
            /* transform: rotateY(45deg); */
            /* transform: rotateY(-45deg); */

            /* transform: rotateY(20deg, 40deg, 60deg);錯誤 */
            transform: rotateX(20deg) rotateY(40deg) rotateZ(60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sBox"></div>
    </div>
</body>
</html>

傾斜轉換

傾斜轉換：元素傾斜
值：角度deg；正負值方向相反
默認的基點在元素的中心點
Z軸沒有傾斜

transform: skewX(45deg); transform: skewX(-45deg);

X軸傾斜，傾斜後與Y軸夾角，元素高度不變
正值逆時針傾斜，負值順時針傾斜

transform: skewY(45deg); transform: skewY(-45deg);

Y軸傾斜，傾斜後與X軸夾角，元素高度不變
正值順時針傾斜，負值逆時針傾斜

transform: skew(45deg, 30deg);

傾斜簡寫，值1是X軸，值2是Y軸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標題</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 200px; height: 200px; background: #ccc;
            margin:50px auto; 
            perspective: 500px;
        }
        .sBox{
            width: 200px; height: 200px; background: red;
        }
        .sBox:hover{
            transform: skewX(45deg);
            transform: skewX(45deg);

            transform: skewY(45deg);
            transform: skewY(-45deg);

            transform: skew(45deg, 39deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sBox"></div>
    </div>
</body>
</html>

轉接簡寫

屬性值書寫有順序，順序不一樣，效果不一樣

transform: translate(100px, 50px) scale(0.5, 0.8) rotateZ(-45deg) skewX(30deg);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標題</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 200px; height: 200px; background: #ccc;
            margin:50px auto; 
            perspective: 500px;
        }
        .sBox{
            width: 200px; height: 200px; background: red;
            transition: transform 1s;
        }
        .sBox:hover{
           transform: translate(100px, 50px) scale(0.5, 0.8) rotateZ(-45deg) skewX(30deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sBox"></div>
    </div>
</body>
</html>

元素翻轉後是否可見

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標題</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style type="text/css">
        .box{
            width: 200px; height: 200px; background: #ccc;
            margin:50px auto; 
            perspective: 500px;
        }
        .sBox{
            width: 200px; height: 200px; background: red;
            transition: transform 1s;

            /* 定義當元素不面向屏幕時是否可見 */
            backface-visibility: hidden;
        }
        .sBox:hover{
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="sBox">123</div>
    </div>
</body>
</html>

2D位移轉換

視距

3D位移轉換

縮放轉換

2D角度轉換

3D角度轉換

傾斜轉換

轉接簡寫

元素翻轉後是否可見

35K*14 薪，入職了！這公司只要不裁員，我能一直呆下去！

JavaScript 本地存儲

基於jQuery實現幻燈片切換效果

HTML5 canvas組件

JavaScript 音頻插件和圖表插件

基於jQuery實現垂直輪播效果

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

linux以太網驅動總結