一、2D效果屬性

要使用這些屬性，我們需要通過transform，并且，為了保證兼容性，我們可能還需要添加帶有瀏覽器內核前綴的屬性，比如 -webkit-transform，

在認識屬性前先知道這里的使用坐標系是怎樣的，其坐標系與傳統的數學坐標系不同，

坐標系簡單分析如下：       

               1.默認狀態下，x軸是水平的，向右為正，           

               2.默認狀態下，y軸是垂直的，向下為正，這與傳統的數學坐標系不同，

1、位移屬性 translate( x , y )

簡單來說，我們可以認為專案處于一個XY坐標軸的原點，translate( x , y )，當x為正的時候，則專案水平（x軸）向右移動[x]距離；負則向左移動[x]距離，y為正的時候，則專案垂直（y軸）向下移動[y]，反之向上移動，當然，我們也可以把該屬性，拆分為translateX(n)，和translateY(n)，原理相同，不過一般我們還是推薦綜合的寫法，

圖1.1.1位移屬性 translate( x , y )

代碼如下：

.box01{
    background: rgba(7,204,63,0.9);
}/*寬高等代碼省略，這里只展示效果，圖為內容顯示“無”的盒子，以下盒子均是本盒移動后的狀態*/
.box02{
    background: rgba(7,204,63,0.6);
    transform: translate(100px,100px);
}/*最右區塊*/
.box03{
    background: rgba(7,204,63,0.6);
    transform: translate(-100px,-100px);
}/*左邊第二個盒子*/
.box04{
    background: rgba(7,204,63,0.3);
    transform: translateX(-300px);
}/*第一個盒子*/

2、旋轉屬性 rotate()

這個屬性也很簡單，比如rotate( n deg)，n是數字，deg是單位，我們可以理解為角度，0deg則不旋轉，n為正時，順時針旋轉n度，反之，逆時針旋轉，

    transform:rotate();  旋轉的是一個度數 deg

    默認情況下：繞著中心點進行轉動 向右轉（順時針）

    單獨設定圍繞某個軸（X Y）

    transform:rotateX() （在X軸方向順時針轉）

    transform:rotateY() （在Y軸方向順時針轉）

圖1.2.1.旋轉屬性rotate()

.box01{
    background: rgba(7,204,63,0.6);
    transform: translate(-200px,0) rotate(-90deg);
}/*最左邊盒子*/
.box02{
    background: rgba(7,204,63,0.9);
}/*未移動狀態下盒子顯示為“無”的盒子*/
.box03{
    background: rgba(7,204,63,0.6);
    transform: translate(200px,0) rotate(45deg);
}/*最右邊盒子*/

 3、縮放屬性 scale()

transform:scale(引數1，引數2); （0 - 0.999999 縮小   大于1 放大） （以自身中心實作縮放）

      引數1：X軸縮放的比例

      引數2：Y軸縮放的比例


    注：如果兩個引數相同的情況下可直接寫一個，

    單獨設定X Y

    transform:scaleX();

    transform:scaleY();

圖1.3.1縮放屬性 scale(x,y)

.box01{
    background: rgba(7,204,63,0.9);
}/*未改變狀態下盒子*/
.box02{
    background: rgba(7,204,63,0.6);
    transform: scale(1.5,0.5);
}
.box03{
    background: rgba(7,204,63,0.6);
    transform: scale(0.5,1.5);
}

4、傾斜屬性 skew()

skew( x deg, y deg ) ,分別表示 X軸和 Y軸傾斜的角度，值可以為負，反方向，
該屬性也可以拆分為，skewX( ndeg )，skewY( ndeg )，對 X軸和 Y軸的傾斜角度分別描述，

transform:skew();  deg（正度數向左方傾斜）默認x軸 在x軸向下傾斜

    transform:skewX()

    transform:skewY()   在y軸向上傾斜

圖1.4.1傾斜屬性 skew(x,y)

.box01{
    background: rgba(7,204,63,0.9);
}/*未改變狀態下盒子*/
.box02{
    background: rgba(7,204,63,0.6);
    transform: skew(0deg,45deg);
}
.box03{
    background: rgba(7,204,63,0.6);
    transform: skew(45deg,0deg);
}

 二、3D效果屬性

3D效果就是立體效果，怎么實作一個3D效果的影片呢？讓我們分步來說，
我們在這里簡單分為三步，第一步是立體環境，第二步是專案的動作，第三步則是完成這些動作的規律，比如說時間，速度等，這些綜合起來，就是一個3D效果的影片，

1、跟2D影片不同的是，我們需要在外層元素上添加這兩個屬性（環境）：

1） transform-style：flat / preserve-3d 默認前一個，但是3D效果需要我們在整個影片的最外層元素，設定后一個屬性值，
2） perspective：none / px 這個屬性可以理解為視距，如果把螢屏當作空間，我們做的這個3D效果距離視圖的距離，默認為none（那就不要用了），或者是像素值，如1000px，

1.1css-3d景深(3d空間）
     觀察物體的——視角距離（放誰身上就是和誰的觀看距離）
     近大遠小
     perspective:1200px;(一般都是在父元素中使用)
     transform:perspective:(1200px)(在子元素中使用)

如果兩個都設定會發生沖突，建議只設定父元素，通常的數值在900-1200之間
如果當你的實作距離物體足夠遠的時候基本上就不會有近大遠小的感覺

         視覺角度：
            persperctive-origin:
                left top
                center center
                50% 50%
                0px 0px
                    
   讓當前形成一個3D舞臺，讓其子元素在3D空間進行一個交換，
    transform-style:preserve-3d / flat(默認值：平面)

    2d場景，在螢屏上水平和垂直的交叉線x軸和y軸，3d場景，在垂直于螢屏的方法，相對于3d多出個z軸，Z軸：靠近螢屏的方向是正向，遠離螢屏的方向是反向

2、實作一個3D影片，在2D相關屬性使用的基礎上，我們還經常用的這幾個（動作）：

圖2.2.1 3D坐標系

1） 3D旋轉rotate3d(x,y,z,a)、 rotateX( deg ) 、rotateY( deg )、 rotateZ( deg ) ，deg為旋轉角度，單位deg，繞XYZ軸旋轉的情況，來設定rotateX/Y/Z(正值均為順時針旋轉，反之），
2） 3D位移translate3d(x,y,z)、 translateZ() 、translate在2D影片中是位移，在3D中同樣也是如此，只是，在3D效果中我們增加了一個Z軸位移，
3）3D縮放 scale3d(x,y,z) 也可以分開寫，如scaleZ()...

rotate3D(x,y,z,a)  [ 0不旋轉，1旋轉 ]

           x：是一個0到１之間的數值，主要用來描述元素圍繞X軸旋轉的矢量值；

           y：是一個０到１之間的數值，主要用來描述元素圍繞Y軸旋轉的矢量值；

           z：是一個０到１之間的數值，主要用來描述元素圍繞Z軸旋轉的矢量值；

           a：是一個角度值，主要用來指定元素在3D空間旋轉的角度，如果其值為正值，元素順時針旋轉，反之元素逆時針旋轉，

.box{
    height: 300px;
    width: 700px;
    margin: 0 auto;
    margin-top: 100px;
    border: 2px solid green;
    position: relative;
    transform-style:preserve-3d;
    perspective:1000px;
}
.box div{
    height: 150px;
    width: 150px;
    float: left;
    margin-right: 30px;
    position: relative;
}
.box01{
    background: rgba(7,204,63,0.9);
    transition: all 3s;

}
.box02{
    background: rgba(7,204,63,0.6);
    transition: all 3s;
}
.box03{
    background: rgba(7,204,63,0.6);
    transition: all 3s
}
.box01:hover{
    transform: translateZ(-50px);
}
.box02:hover{
    transform: rotateX(360deg);

}
.box03:hover{
    ;
    transform: rotateY(360deg);
}
</style>
</head>
<body>
<div >
    <div >translateZ(-50px)</div>
    <div >rotateX(45deg)</div>
    <div >rotateY(45deg)</div>
</div>
</body>
</html>

3、一個影片，我們怎么設定它的啟動方式，影片效果怎么樣，是快是慢，勻速還是其他，什么時候啟動，我們一般都通過 transition 這個過渡屬性來設定，當然，2D影片也可以用這個屬性，

transition 為css3過渡屬性：

    1. transition-property：檢索或設定物件中的參與過渡的屬性

    2. transition-duration：檢索或設定物件過渡的持續時間

    3. transition-delay：檢索或設定物件延遲過渡的時間

    4. transition-timing-function：檢索或設定物件中過渡的影片型別


  簡寫方法：

    transition: 屬性值1 屬性值2 屬性值3 屬性值4
    注：transition: width 1s 1s linear
           transition: height 1s 1s linear 

  設定兩個物件樣式上面方式不可應為（transition: width 1s 1s linear， height 1s 1s linear）

      屬性值1： 需要參與過渡屬性  all ( 能支持過渡屬性的都會過渡變換 默認值)

      屬性值2： 過渡的時間  s秒  ms 毫秒

      屬性值3： 延遲的時間  s秒  ms 毫秒

      屬性值4： 影片的型別（勻速、勻加速、勻減速........）/*詳見w3c*/



  注：transition 必須通過滑鼠事件觸發（如滑鼠滑過）

三、關鍵幀影片

一個關鍵幀影片，最少包含兩部分，animation 屬性及屬性值（影片的名稱和運行方式運行時間等），@keyframes（規定影片的具體實作程序）

關鍵幀的定義

1、不同于過渡影片只能定義首尾兩個狀態，關鍵幀影片可以定義多個狀態，或者用關鍵幀的話來說，過渡影片只能定義第一幀和最后一幀這兩個關鍵幀，而關鍵幀同時可以定義程序中的，

    過渡 transition:

         特點：需要事件進行觸發，

    影片 animation

         特點：不需要事件進行觸發，呼叫關鍵幀即可

  animation vs transition
       
       相同點：都是隨著時間改變元素的屬性值，
       
       不同點：transition需要觸發一個事件(hover事件或click事件等)才會隨時間改變其css屬性；而animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來改變元素css的屬性值，從而達到一種影片的效果，css3的animation就需要明確的影片屬性值

使用：

      @keyframes的使用方法，可以是from->to（等同于0%和100%），也可以是從0%->100%之間任意個的分層設定，
       @keyframes   name{/*name為關鍵幀的名稱*/

       from{初始狀態屬性}

       to{結束狀態屬性}}

       或@keyframes xx{

       0%{初始狀態屬性}

       50%（中間也可再添加關鍵幀）

       100%{結束狀態屬


 animation: 復合屬性
    animation-name  關鍵幀的名稱，規定@keyframes 影片的名稱，

    animation-duration  影片的持續的時間，規定影片完成一個周期所花費的秒或毫秒，默認是 0，
 
    animation-timing-function  影片運用的型別（勻速linear、加速度、減速度、貝塞爾曲線），規定影片的速度曲線，默認是 “ease”，常用的還有linear，同transtion ，

    animation-delay 影片的延遲，規定影片何時開始，默認是 0，

    animation-iteration-count  影片運動的次數（默認情況下運動1次） infinite(無限回圈)，規定影片被播放的次數，默認是 1，但我們一般用infinite，一直播放，

    animation-direction 運動的方向

常用的寫法：
 
    animation:關鍵幀的名稱 影片運動的時間 linear(勻速) 影片延遲的時間

animation-direction 運動的方向：

          reverse：反方向運行 （ 讓關鍵幀從后往前執行 ）

          alternate：影片先正常運行再反方向運行，并持續交替運行

          alternate-reverse：影片先反運行再正方向運行，并持續交替運行

    
 animation-timing-function 影片運用的型別：（詳見w3c）
 
   linear：規定以相同速度開始至結束的過渡效果（等于 cubic-bezier(0,0,1,1)），(勻速)

   ease：  規定慢速開始，然后變快，然后慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）（相對于勻速，中間快，兩頭慢），

   ease-in：規定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）（相對于勻速，開始的時候慢，之后快），
   
   ease-out ：規定以慢速結束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）（相對于勻速，開始時快，結束時候間慢，），

   ease-in-out：規定以慢速開始和結束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）（相對于勻速，（開始和結束都慢）兩頭慢），

   cubic-bezier(n,n,n,n) ：在 cubic-bezier 函式中定義自己的值，可能的值是 0 至 1 之間的數值，
   
   step-start：沒有影片中間的過渡效果，每次直接跳到下一幀開始的地方，看不到第一幀

   step-start：按keyframes設定逐幀顯示，第一幀為keyframes設定的第一幀，

   step-end：按keyframes設定逐幀顯示，第一幀為樣式的初始值，從第一幀開始處開始，看不到最后一幀，

animation-play-state     屬性值： paused暫停、running運動         (常配合滑鼠事件使用）

2、我們通過下面一個稍微復雜點的demo來看一下，基本上用到了上面說到的大部分知識，

雙重立方體旋轉

<!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>

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
body{
    background: #9CC;
    perspective:1000px;
}
.box{
    height:200px;
    width: 200px;
    position: relative;
    margin:200px auto;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    transform:rotateX(20deg) rotateY(20deg);
    animation:one 5s linear infinite;
    -webkit-animation:one 5s linear infinite;
}
@keyframes one{
    from{
        transform:rotateX(-20deg) rotateY(0deg) ;
    }
    to{
        transform:rotateX(340deg) rotateY(360deg) ;
    }
}
@-webkit-keyframes one{
    from{
        transform:rotateX(-20deg) rotateY(0deg) ;
    }
    to{
        transform:rotateX(340deg) rotateY(360deg) ;
    }
}
.box div{
    width:200px;
    height: 200px;
    background: black;
    opacity: 0.3;
    position: absolute;
    top:0;
    left:0;
    border: 1px solid white;
    transition:all 2s;
}
.box span{
    width: 100px;
    height: 100px;
    background: orange;
    position:absolute;
    border: 1px solid white;
    top:50%;
    left:50%;
    opacity: 0.7;
    margin-top: -50px;
    margin-left: -50px;
    font-size: 50px;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 100px;
}
.box div:nth-child(1){
    transform:translateZ(100px);

}
.box div:nth-child(2){
    transform:translateZ(-100px);

}
.box div:nth-child(3){

    transform:rotateX(90deg) translateZ(100px);

}
.box div:nth-child(4){
    transform:rotateX(90deg) translateZ(-100px);

}
.box div:nth-child(5){
    transform:rotateY(90deg) translateZ(100px);

}
.box div:nth-child(6){
    transform:rotateY(90deg) translateZ(-100px);

}
.box:hover div:nth-child(1){
    transform:translateZ(200px);
}
.box:hover div:nth-child(2){
    transform:translateZ(-200px);

}
.box:hover div:nth-child(3){

    transform:rotateX(90deg) translateZ(200px);

}
.box:hover div:nth-child(4){
    transform:rotateX(90deg) translateZ(-200px);

}
.box:hover div:nth-child(5){
    transform:rotateY(90deg) translateZ(200px);

}
.box:hover div:nth-child(6){
    transform:rotateY(90deg) translateZ(-200px);

}
.box span:nth-child(7){
    transform:translateZ(50px);

}
.box span:nth-child(8){
    transform:translateZ(-50px) rotateY(180deg);

}
.box span:nth-child(9){
    transform:rotateX(90deg) translateZ(50px);

}
.box span:nth-child(10){
     transform:rotateX(90deg) translateZ(-50px);

}
.box span:nth-child(11){
    transform:rotateY(90deg) translateZ(50px);

}
.box span:nth-child(12){
     transform:rotateY(270deg) translateZ(50px);
}

</style>
</head>
<body>
<div >
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <span>1</span>
    <span>6</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>2</span>
</div>
</body>
</html>

~~~~~~over~~~~~~

參考資料：https://blog.csdn.net/lyznice/article/details/54575905  CSDN博主「馴鹿0」

對此thanks以上博主

Time:2020-02-29

標籤：HTML5

上一篇：git系列之---作業中專案的常用git操作

下一篇：資料庫的增刪查改