css空間轉(zhuǎn)換/視距/空間旋轉(zhuǎn)/立體呈現(xiàn)/3d導(dǎo)航案例/空間縮放/animation動(dòng)畫(huà)/走馬燈案例/精靈動(dòng)畫(huà)/多組動(dòng)畫(huà)/全民出游案例

這篇具有很好參考價(jià)值的文章主要介紹了css空間轉(zhuǎn)換/視距/空間旋轉(zhuǎn)/立體呈現(xiàn)/3d導(dǎo)航案例/空間縮放/animation動(dòng)畫(huà)/走馬燈案例/精靈動(dòng)畫(huà)/多組動(dòng)畫(huà)/全民出游案例。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

?空間轉(zhuǎn)換

空間：是從坐標(biāo)軸角度定義xyz三條坐標(biāo)軸構(gòu)成了一個(gè)立體空間按，z軸位置與視線方向相同。

css空間轉(zhuǎn)換/視距/空間旋轉(zhuǎn)/立體呈現(xiàn)/3d導(dǎo)航案例/空間縮放/animation動(dòng)畫(huà)/走馬燈案例/精靈動(dòng)畫(huà)/多組動(dòng)畫(huà)/全民出游案例,HTML和CSS學(xué)習(xí),css,前端,html,css3,學(xué)習(xí)

屬性：transform

? ? ? ? transform：translate3d（x,y,z);

????????transform：translatex（);

????????transform：translatey（);

????????transform：translatez（);

取值（正負(fù)均可）

? ? ? ? 像素單位數(shù)值deg

? ? ? ? 百分比（參照盒子自身尺寸計(jì)算結(jié)果）

注意：電腦是平面，默認(rèn)無(wú)法觀察z軸平移效果

3d小括號(hào)里面必須用逗號(hào)隔開(kāi)三個(gè)數(shù)

視距perspective

作用：指定觀察者與z=0平面的距離，為元素添加透視效果

透視效果：近大遠(yuǎn)小，近實(shí)遠(yuǎn)虛

視距屬性加給直接父級(jí)，取值范圍800-1200

perspective：視距；

 /* 視距屬性必須添加給 直接父級(jí) */
 .father {
   perspective: 1000px;
   /* perspective: 10000px;
   perspective: 100px; */
 }

空間旋轉(zhuǎn)

transform：rotatez（值）；

沿著z軸旋轉(zhuǎn)與平面旋轉(zhuǎn)的效果一樣。因?yàn)閦軸是圖片的中心點(diǎn)。

transform：rotatex（值）；

值為正數(shù)，盒子上面向里旋轉(zhuǎn)。為了更好的看到旋轉(zhuǎn)效果，最好給圖片加一個(gè)透視perspective

transform：rotatey（值）；

盒子沿著垂直方向旋轉(zhuǎn)。值為正數(shù)，盒子右邊向里旋轉(zhuǎn)。

左手法則——根據(jù)旋轉(zhuǎn)方向確定取值正負(fù)。

左手握住旋轉(zhuǎn)軸，拇指指向正值方向，其他四個(gè)手指彎曲方向?yàn)樾D(zhuǎn)正值方向。

立體呈現(xiàn)——transform-style

作用：設(shè)置元素的子元素是位于3d空間還是平面中，屬性加給父級(jí)。

屬性名：transform-style

flat：子級(jí)處于平面中

preserve-3d：子級(jí)處于3d空間

呈現(xiàn)立體圖形步驟

父元素添加transform-style：preserve-3d；
子級(jí)定位，子絕父相；
調(diào)整盒子的位置（位移或旋轉(zhuǎn)）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>立體呈現(xiàn)</title>
    <style>
      .cube {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        /* background-color: pink; */
        transition: all 2s;

        transform-style: preserve-3d;

        /* 旋轉(zhuǎn)與案例效果無(wú)關(guān)，用來(lái)看前后移動(dòng)的效果 */
        /* transform: rotateY(89deg); */
      }

      .cube div {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
      }

      .front {
        background-color: orange;
        transform: translateZ(100px);
      }

      .back {
        background-color: green;
        transform: translateZ(-100px);
      }

      .cube:hover {
        transform: rotateY(90deg);
      }
    </style>
  </head>
  <body>
    <div class="cube">
      <div class="front">前面</div>
      <div class="back">后面</div>
    </div>
  </body>
</html>

3d導(dǎo)航

鼠標(biāo)懸停，3d立方體旋轉(zhuǎn)并且文字變換。

搭建立方體
綠色是立方體前面
橙色是立方體上面
添加鼠標(biāo)懸停的旋轉(zhuǎn)效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D導(dǎo)航</title>
    <style>
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .nav {
        width: 300px;
        height: 40px;
        margin: 50px auto;
      }

      .nav ul {
        display: flex;
      }

      .nav li {
        position: relative;
        width: 100px;
        height: 40px;
        line-height: 40px;
        transition: all 0.5s;

        transform-style: preserve-3d;

        /* 為了看到橙色和綠色的移動(dòng)過(guò)程，給立方體添加旋轉(zhuǎn) */
        /* transform: rotateX(-20deg) rotateY(30deg); */
      }

      .nav li a {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        text-decoration: none;
        color: #fff;
      }

      /* 立方體每個(gè)面都有獨(dú)立的坐標(biāo)軸，互不影響 */
      .nav li a:first-child {
        background-color: green;
        transform: translateZ(20px);
      }

      .nav li a:last-child {
        background-color: orange;
        transform: rotateX(90deg) translateZ(20px);
      }

      .nav li:hover {
        transform: rotateX(-90deg);
      }
    </style>
  </head>

  <body>
    <div class="nav">
      <ul>
        <li>
          <a href="#">首頁(yè)</a>
          <a href="#">Index</a>
        </li>
        <li>
          <a href="#">登錄</a>
          <a href="#">Login</a>
        </li>
        <li>
          <a href="#">注冊(cè)</a>
          <a href="#">Register</a>
        </li>
      </ul>
    </div>
  </body>
</html>

空間轉(zhuǎn)換-縮放

屬性：值大于1放大，小于1縮小。

transform：scale3d（x,y,z);

transform：scalex();

transform：scaley();

transform：scalez();

動(dòng)畫(huà)-animation

過(guò)渡：實(shí)現(xiàn)兩個(gè)狀態(tài)之間的變化過(guò)程

動(dòng)畫(huà)：實(shí)現(xiàn)多個(gè)狀態(tài)間的變化過(guò)程，動(dòng)畫(huà)過(guò)程可控（重復(fù)播放，最終畫(huà)面，是否暫停）

animation復(fù)合屬性：

animation:動(dòng)畫(huà)名稱(chēng)? 動(dòng)畫(huà)時(shí)長(zhǎng)? 速度曲線? 延遲時(shí)間重復(fù)次數(shù)? 動(dòng)畫(huà)方向? 執(zhí)行完畢時(shí)狀態(tài)

animation拆分屬性： css空間轉(zhuǎn)換/視距/空間旋轉(zhuǎn)/立體呈現(xiàn)/3d導(dǎo)航案例/空間縮放/animation動(dòng)畫(huà)/走馬燈案例/精靈動(dòng)畫(huà)/多組動(dòng)畫(huà)/全民出游案例,HTML和CSS學(xué)習(xí),css,前端,html,css3,學(xué)習(xí)

提示：

動(dòng)畫(huà)名稱(chēng)和動(dòng)畫(huà)時(shí)長(zhǎng)必須賦值

取值不分先后順序

如果有兩個(gè)時(shí)間值，第一個(gè)時(shí)間表示動(dòng)畫(huà)時(shí)長(zhǎng)，第二個(gè)時(shí)間表示延遲時(shí)間。

 <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: pink;

        /* linear：勻速 */
        animation: change 1s linear;

        /* steps：分步動(dòng)畫(huà)，工作中，配合精靈圖實(shí)現(xiàn)精靈動(dòng)畫(huà) */
        animation: change 1s steps(3);

        /* 如果有兩個(gè)時(shí)間，第一個(gè)是動(dòng)畫(huà)時(shí)長(zhǎng)，第二個(gè)是延遲時(shí)間 */
        animation: change 1s 2s;

        /* 重復(fù)次數(shù)，infinite：無(wú)限循環(huán) */
        animation: change 1s 3;
        animation: change 1s infinite;

        /* alternate：反向 */
        animation: change 1s infinite alternate;

        /* 動(dòng)畫(huà)執(zhí)行完畢時(shí)的狀態(tài)， forwards：結(jié)束狀態(tài)； backwards：開(kāi)始狀態(tài)（默認(rèn)） */
        animation: change 1s forwards;
        animation: change 1s backwards;
      }

      /* 寬度 從 200 變化到 800 */
      @keyframes change {
        from {
            width: 200px;
        }
        to {
            width: 800px;
        }
      }

    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

實(shí)現(xiàn)步驟：?

定義動(dòng)畫(huà)

@keyframes 動(dòng)畫(huà)名稱(chēng){? ?from{ }? ? to{ }? ? ?}

@keyframes 動(dòng)畫(huà)名稱(chēng){? 0%{? }? 10%{? }? ?.......? 100% {? }? ?}

百分比：表示的意思是動(dòng)畫(huà)時(shí)長(zhǎng)的百分比?

? ? ?2.使用動(dòng)畫(huà)

animation:動(dòng)畫(huà)名稱(chēng)? 動(dòng)畫(huà)花費(fèi)時(shí)長(zhǎng)；（時(shí)間以s為單位）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>動(dòng)畫(huà)實(shí)現(xiàn)步驟</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: pink;
        
        animation: change 1s;
      }

      動(dòng)畫(huà)一：寬度從200變化到800 
      @keyframes change {
        from {
            width: 200px;
        }
        to {
            width: 800px;
        }
      } 

      動(dòng)畫(huà)二：從 200*100 變化到 300*300 變化到800*500 
      @keyframes change {
        0% {
            width: 200px;
            height: 100px;
        }
        20% {
            width: 300px;
            height: 300px;
        }
        100% {
            width: 800px;
            height: 500px;
        }
      }

    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

走馬燈案例

圖片依次橫著向左移動(dòng)，一起向左位置改變，當(dāng)鼠標(biāo)移動(dòng)到圖片位置上時(shí)，圖片停止移動(dòng)。

走馬燈要用到無(wú)縫動(dòng)畫(huà)。

無(wú)縫動(dòng)畫(huà)原理：
復(fù)制開(kāi)頭圖片到結(jié)尾位置（圖片累加寬度=區(qū)域?qū)挾龋?/p>

    <style>
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }

      img {
        display: block;
        width: 200px;
      }
      
      .box {
        width: 600px;
        height: 112px;
        border: 5px solid #000;
        margin: 100px auto;
        overflow: hidden;
      }

      .box ul {
        display: flex;
        animation: move 6s infinite linear;
      }

      /* 定義位移動(dòng)畫(huà)；ul使用動(dòng)畫(huà)；鼠標(biāo)懸停暫停動(dòng)畫(huà) */
      @keyframes move {
        0% {
          transform: translate(0);
        }
        100% {
          transform: translate(-1400px);
        }
      }

      .box:hover ul {
        animation-play-state: paused;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
        <li><img src="./images/4.jpg" alt="" /></li>
        <li><img src="./images/5.jpg" alt="" /></li>
        <li><img src="./images/6.jpg" alt="" /></li>
        <li><img src="./images/7.jpg" alt="" /></li>
        <!-- 替身：填補(bǔ)顯示區(qū)域的露白 -->
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
      </ul>
    </div>
  </body>
</html>

逐幀動(dòng)畫(huà)

核心原理：

1.step（）逐幀動(dòng)畫(huà)

2.css精靈圖

精靈動(dòng)畫(huà)制作步驟：

1.準(zhǔn)備顯示區(qū)域

? ? ? ? 盒子尺寸與一張精靈小圖尺寸相同

2.定義動(dòng)畫(huà)

? ? ? ? 移動(dòng)背景圖（移動(dòng)距離=精靈圖寬度）

3.使用動(dòng)畫(huà)

? ? ? ? step（N），N與精靈小圖個(gè)數(shù)相同

精靈動(dòng)畫(huà)的實(shí)現(xiàn)：

<!DOCTYPE html>
 <style>
    div {
      width: 140px;
      height: 140px;
      border: 1px solid #000;
      background-image: url(./images/bg.png);
      animation: run 1s steps(12) infinite;
    }

    @keyframes run {
      from {
        background-position: 0 0;
      }
      to {
        background-position: -1680px 0;
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

多組動(dòng)畫(huà)

animation：動(dòng)畫(huà)1，動(dòng)畫(huà)2，動(dòng)畫(huà)N;?

?animation:?
??run 1s steps(12) infinite,
? move 3s forwards?;

 <style>
    div {
      width: 140px;
      height: 140px;
      /* border: 1px solid #000; */
      background-image: url(./images/bg.png);
      animation: 
        run 1s steps(12) infinite,
        move 3s forwards
      ;
    }

    /* 當(dāng)動(dòng)畫(huà)的開(kāi)始狀態(tài)樣式 跟 盒子默認(rèn)樣式相同，可以省略動(dòng)畫(huà)開(kāi)始狀態(tài)的代碼 */
    @keyframes run {
      /* from {
        background-position: 0 0;
      } */
      to {
        background-position: -1680px 0;
      }
    }

    @keyframes move {
      /* 0% {
        transform: translate(0);
      } */
      100% {
        transform: translate(800px);
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

全民出游

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
      }

      .box {
        width: 100%;
        height: 100%;
        background: url('images/f1_1.jpg') no-repeat top center;
        background-size: cover;
        position: relative;
      }

      .cloud img {
        position: absolute;
        left: 50%;
      }

      .cloud img:nth-child(1) {
        top: 20px;
        margin-left: -260px;
        animation: cloud 2s linear infinite alternate;
      }

      .cloud img:nth-child(2) {
        top: 100px;
        margin-left: 380px;
        animation: cloud 2.5s linear infinite alternate;
      }

      .cloud img:nth-child(3) {
        top: 200px;
        margin-left: -560px;
        animation: cloud 3s linear infinite alternate;
      }

      .balloon {
        position: absolute;
        left: 50%;
        top: 20%;
        margin-left: -390px;
        animation: balloon 1.5s linear alternate infinite;
      }

      .giraffe {
        position: absolute;
        left: 50%;
        margin-left: 160px;
        top: 15%;
      }

      .text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        animation: text 1s ease forwards;
      }

      .jump_text img {
        position: absolute;
        left: 50%;
        bottom: 42px;
        width: 100px;
      }

      .jump_text img:nth-child(1) {
        margin-left: -390px;
        animation: jump_text 0.8s infinite alternate;
      }

      .jump_text img:nth-child(2) {
        margin-left: -180px;
        animation: jump_text 0.8s 0.2s infinite alternate;
      }

      .jump_text img:nth-child(3) {
        margin-left: 35px;
        animation: jump_text 0.8s 0.4s infinite alternate;
      }

      .jump_text img:nth-child(4) {
        margin-left: 240px;
        animation: jump_text 0.8s 0.6s infinite alternate;
      }

      /* 白云動(dòng)畫(huà) */
      @keyframes cloud {
        0% {
          transform: translateX(0px);
        }

        100% {
          transform: translateX(40px);
        }
      }

      /* 熱氣球動(dòng)畫(huà) */
      @keyframes balloon {
        0% {
          transform: translateY(0px);
        }

        100% {
          transform: translateY(-30px);
        }
      }

      /* 跳動(dòng)文字 */
      @keyframes jump_text {
        0% {
          transform: translateY(0px);
        }

        100% {
          transform: translateY(-30px);
        }
      }

      /* 文字 */
      /* 注意：因?yàn)閠ransform是復(fù)合屬性，所以我們要重新申明一遍translate */
      @keyframes text {
        0% {
          transform: translate(-50%, -50%) scale(1);
        }
        20% {
          transform: translate(-50%, -50%) scale(0);
        }

        40% {
          transform: translate(-50%, -50%) scale(1.4);
        }

        70% {
          transform: translate(-50%, -50%) scale(0.8);
        }

        100% {
          transform: translate(-50%, -50%) scale(1);
        }
      }
    </style>
  </head>

  <body>
    <div class="box">
      <!-- 白云 -->
      <div class="cloud">
        <img src="images/yun1.png" />
        <img src="images/yun2.png" />
        <img src="images/yun3.png" />
      </div>

      <!-- 熱氣球 -->
      <div class="balloon">
        <img src="images/san.png" />
      </div>

      <!-- 長(zhǎng)頸鹿 -->
      <div class="giraffe">
        <img src="images/lu.png" />
      </div>

      <!-- 文字 -->
      <div class="text">
        <img src="images/font1.png" />
      </div>

      <!-- 跳動(dòng)文字 -->
      <div class="jump_text">
        <img src="images/1.png" />
        <img src="images/2.png" />
        <img src="images/3.png" />
        <img src="images/4.png" />
      </div>
    </div>
  </body>
</html>

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-855463.html

到了這里，關(guān)于css空間轉(zhuǎn)換/視距/空間旋轉(zhuǎn)/立體呈現(xiàn)/3d導(dǎo)航案例/空間縮放/animation動(dòng)畫(huà)/走馬燈案例/精靈動(dòng)畫(huà)/多組動(dòng)畫(huà)/全民出游案例的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！