2D變換

你若精彩，蝴蝶自來發表於2018-08-29
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        html{
            height: 100%;
            overflow: hidden;
            
        }
        body{
            height: 60%;
            width: 60%;
            border: 1px solid;
            margin: 100px auto;
            overflow: hidden;
            
        }
        #test{
            height: 200px;
            width: 200px;
            border-radius: 50%;
            border: 1px solid;
            position: absolute;
            font: 40px/200px "微軟雅黑";
            text-align: center;
            
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        body:hover #test{
            /*transform: translate(300px,300px);*/
            /*transform: scaleX(1.5);*/
            transform: rotate(130deg);
        }
        /*
         1、translate(x,y):
         左右移動，單位是px,有兩個值，
         x，y  表示左/右，上/下
         一個值的時候表示x值,
         transform: translate(300px,300px);
         表示右下方向移動
         translateX(x) 定義X軸的
         translateY(y)定義Y軸的
         2、scale(x,y) 定義2D縮放轉換
         無單位，數字表示，數字代表縮放多少倍
         如果只填一個值的時候，代表了x和y值一樣，賦予了兩個值
         transform: scaleX(1.5) 代表X和Y都是放大1.5倍，如果要縮小，則改為負數
         scaleX(x) 代表通過設定 X 軸的值來定義縮放轉換  縮放X軸的轉換
         scaleY(y) 通過設定 Y 軸的值來定義縮放轉換。 縮放Y軸的轉換
         3、rotate(angle) 定義 2D 旋轉，在引數中規定角度。
         rotate(<a> [<x> <y>])變換函式指定由旋轉a給定旋轉度數
         如果可選引數x，並y沒有提供，則旋轉是當前使用者的座標系的原點（就是中心點）。
         如果可選引數x和y提供的，該旋轉是關於點(x, y)。
         4、skew(x-angle,y-angle)定義沿著 X 和 Y 軸的 2D 傾斜轉換。
         skewX(angle) 定義沿著 X 軸的 2D 傾斜轉換。
         skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉換。
　　　　　　注意：
　　　　　變換組合時，計算方向是從右往左進行繼續的（這時候是用矩陣去計算的）

         
         
         * */
    </style>
    <body>
        <div id="test">
            Rainbow
        </div>
    </body>
</html>

 

相關文章