WEB前端第十六課——轉換及過渡

時間 2020-08-06

標籤 web 前端第十六轉換過渡欄目 HTML 简体版

原文原文鏈接

1.transform 2D轉換html

　　transform的屬性經過函數進行定義，2D函數包括：translate()、scale()、rotate()、skew() 函數

　　書寫格式：transform: 函數名（X，Y）3d

　　能夠同時定義多個函數，函數之間經過「空格」隔開orm

　　transform-origin 用於設置轉換元素的基點位置（包括Z軸）htm

2.translate(Xpx,Ypx) 轉換，經過設定參數，從當前元素位置沿着X軸和Y軸移動，容許一個值（X軸移動）blog

　　　　　　　　　　　　參數容許負值，默認左上角爲（0,0）座標，X爲負值向左移動，Y爲負值向上移動utf-8

<html>
<head>
    <meta charset="utf-8">
    <title>CSStransform</title>
    <style>
        .trans{
            width: 200px;
            height: 400px;
            background-color: orangered;
            margin: 100px auto;
        }
        .trans:hover{
            transform: translate(5px,-5px);
            box-shadow: 3px 3px 5px 2px #9f9f9f;
        }
    </style>
</head>
<body>
<div class="trans"></div>
</body>
</html>

3.rotate(deg) 旋轉，元素順時針旋轉設定的角度，參數爲負值時，元素將逆時針旋轉it

　　　　　　　參數值只有一個，單位爲 degio

<html>
<head>
    <meta charset="utf-8">
    <title>CSS_transform</title>
    <style>
        .trans{
            width: 200px;
            height: 400px;
            background-color: orangered;
            margin: 100px auto;
        }
        .trans:hover{
            box-shadow: 3px 3px 5px 2px #9f9f9f;
            transform: rotate(60deg) translate(5px,-5px);
        }
    </style>
</head>
<body>
<div class="trans"></div>
</body>
</html>

4.scale(m,n)縮放，經過設置參數值將原始尺寸縮放m/n倍，m值表明寬，n值表明高，容許一個值function

　　　　　　　　默認值爲1，0~1表示縮小，大於1表示放大

        .trans:hover{
            box-shadow: 3px 3px 5px 2px #9f9f9f;
            transform: rotate(60deg) translate(5px,-5px) scale(0.5);
        }

5.skew(Xdeg,Ydeg)元素的傾斜角度，沿水平（X軸）和垂直（Y軸）翻轉元素

　　　　　　　　容許一個值，表示水平軸的角度

        .trans:hover{
            /*transform: rotate(60deg) translate(5px,-5px) scale(1.2,0.5);*/
            box-shadow: 3px 3px 5px 2px #9f9f9f;
            transform: skew(-30deg,80deg);
        }

6.transform3D轉換

　　經常使用函數有：translate（）、scale（）、rot（），沒有skew()函數

　　在2D的基礎上增長 Z軸參數設置，即 translate(X,Y,Z)、scale(X,Y,Z)、rot(X,Y,Z)，也能夠分別設置XYZ參數

　　實現3D效果，父元素須要設置 perspective屬性，定義元素被查看位置的視圖效果（距離），當父元素定義了 perspective屬性時，其子元素會得到透視效果，而非父元素自己

　　perspective-origin(X軸值,Y軸值)，用於定義3D元素的基點位置（可不設置），默認值爲（50% 50%），相似perspective屬性其設置對子元素生效

　　perspective 既能夠單獨做爲屬性使用（書寫格式 perspective: 300px），也能夠做爲 transform的屬性函數使用（書寫格式 transform: perspective(300px)）

7.translate3d(x,y,z) 3D效果

<html>
<head>
    <meta charset="utf-8">
    <title>CSS_transform</title>
    <style>
        .trans{
            width: 500px;
            height: 500px;
            margin: 100px auto;
            background-color: #787772;
            perspective: 300px;
        }
        .son{
            width: 500px;
            height: 500px;
            margin: 100px auto;
            background-color: #ef4222;
            transition: all 8s;
        }
        .son:hover{
            transform: translate3d(200px,-200px,-800px);
        }
    </style>
</head>
<body>
<div class="trans">
    <div class="son"></div>
</div>
</body>
</html>

8.scale3d(x,y,z) 3D效果

<html>
<head>
    <meta charset="utf-8">
    <title>CSS_transform</title>
    <style>
        .trans{
            width: 500px;
            height: 500px;
            margin: 100px auto;
            background-color: #787772;
            perspective: 500px;
        }
        .son{
            width: 500px;
            height: 500px;
            margin: 100px auto;
            background-color: #ef4222;
            transition: all 5s;
            transform: scale(0.2)
        }
        .son:hover{
            transform:scale3d(0.5,0.9,1.7);   /*Z軸轉換效果不明顯*/
        }
    </style>
</head>
<body>
<div class="trans">
    <div class="son"></div>
</div>
</body>
</html>

9.rotate3d(x,y,z) 3D效果

<html>
<head>
    <meta charset="utf-8">
    <title>CSS_transform</title>
    <style>
        .trans{
            width: 500px;
            height: 500px;
            margin: 100px auto;
            background-color: #787772;
            perspective: 500px;
        }
        .son{
            width: 500px;
            height: 200px;
            transition: all 5s;
            background: linear-gradient(45deg,yellowgreen,#ef4222);
        }
        .son:hover{
            transform:scale3d(0.5,2,5) rotatez(180deg) ;
        }
    </style>
</head>
<body>
<div class="trans">
    <div class="son"></div>
</div>
</body>
</html>

10.transition過渡，經過該屬性使元素從一種樣式逐漸變爲另外一種樣式的效果

　　過渡屬性包括：

　　transition-property（須要應用過渡的CSS屬性名稱）、transition-duration（過渡效果持續的時間，默認0s）、transition-timing-function（過渡效果的時間曲線）、transition-delay（過渡效果什麼時候開始，默認0s）

　　transition-property屬性值：none（無）、all（所有）、property name（具體名稱），可同時過渡多個屬性，屬性之間使用「逗號」隔開

　　transition-timing-function屬性值：

　　　　linear，規定開始至結束以相同速度的過渡效果（勻速）

　　　　ease，默認值，規定慢速開始、而後變快、再慢速結束的過渡效果（先快後慢）

　　　　ease-in，規定以慢速開始的過渡效果（加速）

　　　　ease-out，規定以慢速結束的過渡效果（減速）

　　　　ease-in-out，規定以慢速開始和結束的過渡效果（先加速後減速）

　　　　cubic-bezier(n,n,n,n)，自定義過渡效果，n爲0~1之間的數值

　　可設置過渡的屬性：

　　　　顏色屬性

　　　　取值爲數值的屬性

　　　　轉換屬性

　　　　漸變屬性

　　　　陰影屬性

<html>
<head>
    <meta charset="utf-8">
    <title>CSS_transform</title>
    <style>
        .trans{
            width: 500px;
            height: 200px;
            margin: 100px auto;
            background-color: yellowgreen;
            transition: all 5s linear 1s;
        }
        .trans:hover{
            background-color: #ef4222;
        }
    </style>
</head>
<body>
    <div class="trans"></div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。