CSS動畫實例：3D立方體

時間  2020-08-25
標籤 css 動畫 實例 3d 立方體 欄目 CSS 简体版
原文   原文鏈接

CSS3支持3D轉換，與3D轉換有關的屬性有：html

transform：向元素應用 2D或3D 轉換。瀏覽器

transform-origin：改變被轉換元素的位置。ide

transform-style：規定被嵌套元素如何在3D空間中顯示。函數

perspective：規定 3D 元素的透視效果。oop

perspective-origin：規定 3D 元素的底部位置。學習

backface-visibility  定義元素在不面對屏幕時是否可見。動畫

在transform屬性設置中，可以使用的3D轉換函數主要有：spa

matrix3d(n,n, n,n,n,n ,n,n,n ,n,n,n, n,n,n,n )：定義3D轉換，使用16個值的 4x4 矩陣。3d

translate3d(x,y,z)：定義3D平移動轉換。code

translateX(x)：定義3D沿X軸平移轉換。

translateY(y) ：定義3D沿Y軸平移轉換。

translateZ(z) ：定義3D沿Z軸平移轉換。

scale3d(x,y,z) ：定義 3D 縮放轉換。

rotate3d(x,y,z,angle)：定義 3D 旋轉。

rotateX(angle)：定義沿 X 軸的 3D 旋轉。

rotateY(angle) ：定義沿 Y 軸的 3D 旋轉。

rotateZ(angle) ：定義沿 Z 軸的 3D 旋轉。

perspective(n) 定義 3D 轉換元素的透視視圖。

學習和利用3D轉換，能夠繪製立體化的圖形。

1．一個簡單的立方體

      一個立方體有前、後、左、右、上、下共六個面，可在頁面中定義立方體以下：

  <div class="cube">

    <div class="front">front</div>

    <div class="back">back</div>

    <div class="top">top</div>

    <div class="bottom">bottom</div>

    <div class="left">left</div>

    <div class="right">right</div>

  </div>

      爲立方體cube及六個面定義樣式規則，每一個面進行適當的平移和旋轉，能夠繪製出一個3D立方體。編寫的HTML文件以下。

<!DOCTYPE html>
<html>
<head>
<title>一個簡單的3D立方體</title>
<style>
  .container
  {
    margin: 0 auto;
    width: 400px;
    height:400px;
    background:#d8d8d8;
    border: 4px solid rgba(255, 0, 0, 0.9);
    border-radius: 10%;
  }
  .cube 
  {
    position: relative;
    width: 200px;
    top:80px;
    left:80px;
    transform-style:preserve-3d;
    perspective: 800px;
    perspective-origin: -50% -100px;
  }
  .cube div
  {
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.1);
    box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
    text-align: center;
    line-height: 200px;
    font-weight:bold;
    text-shadow:-1px 1px 5px #f60;
    color:#fff;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size:30px;
  }
  .front 
  {
    transform: translateZ(100px);
  }
  .back 
  {
    transform: translateZ(-100px) rotateY(180deg);
  }
  .left 
  {
    transform:rotateY(270deg) translateX(-100px);
    transform-origin: center left;
  }
  .right 
  {
    transform:rotateY(-270deg) translateX(100px);
    transform-origin: top right;
  }
  .top
  {
    transform:rotateX(-90deg) translateY(-100px);
    transform-origin: top center;
  }
  .bottom 
  {
    transform:rotateX(90deg) translateY(100px);
    transform-origin: bottom center;
  }
</style>
</head>
<body>
<div class="container">
  <div class="cube">
    <div class="front">front</div>
    <div class="back">back</div>
    <div class="top">top</div>
    <div class="bottom">bottom</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</div>
</body>
</html>
View Code

       在瀏覽器中打開包含這段HTML代碼的html文件，能夠顯示如圖1所示的立方體。

 

圖1  一個簡單的3D立方體

      去掉圖1中立方體各面上的文字，分別以紅色、橙色、黃色、綠色、青色和藍色表示六個面，而且定義關鍵幀，使得立方體旋轉起來。編寫的HTML文件以下。

<!DOCTYPE html>
<html>
<head>
<title>旋轉的3D立方體</title>
<style>
  .container
  {
    margin: 0 auto;
    width: 400px;
    height:400px;
    background:#d8d8d8;
    border: 4px solid rgba(255, 0, 0, 0.9);
    border-radius: 10%;
  }
  .cube 
  {
    width: 200px;
    height: 200px;
    margin: 100px auto;
    position: relative;
    transform-style: preserve-3d;
    animation: anim 8s linear infinite;
  }
  .cube div 
  {
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .front
  {
     background: rgba(255, 0, 0, 0.3);
     transform: translateZ(100px);
  }
  .back 
  {
     background: rgba(255, 0, 255, 0.3);
     transform: translateZ(-100px);
  }
  .left 
  {
     background-color: rgba(255, 255, 0, 0.3);
     transform-origin: left;
     transform: rotateY(90deg) translateX(-100px);
  }
  .right 
  {
     background: rgba(0, 255, 0, 0.3);
     transform-origin: right;
     transform: rotateY(90deg) translateX(100px);
  }
  .top 
  {
    background: rgba(255, 0, 255, 0.3);
    transform: rotateX(90deg) translateZ(100px);
  }
  .bottom 
  {
    background: rgba(0, 0, 255, 0.3);
    transform: rotateX(-90deg) translateZ(100px);
  }
  @keyframes anim
  {
      0% { transform: rotateX(0deg) rotateY(0deg); }
      100% { transform: rotateX(360deg) rotateY(360deg);}
  }
</style>
</head>
<body>
<div class="container">
 <div class="cube">
  <div class="front"></div>
  <div class="back"></div>
  <div class="top"></div>
  <div class="bottom"></div>
  <div class="left"></div>
  <div class="right"></div>
 </div>
</div>
</body>
</html>
View Code

      在瀏覽器中打開包含這段HTML代碼的html文件，能夠呈現出如圖2所示的動畫效果。

 

圖2  旋轉的立方體

2．3D魔方

      在立方體的每一個面上用線性漸變（Linear Gradients）給背景加上3*3的方格圖形，構成一個3D魔方。

      一個對象背景用線性漸變填充的調用格式爲：

         background: linear-gradient(direction, color-stop1, color-stop2, ...);

       設頁面中有<div class="box"></div>，若爲.box定義樣式規則以下：

  .box

  {

    position: relative;

    height:200px;

    width: 200px;

    background: linear-gradient(to right, red , blue);

  }

       可在頁面中顯示如圖3所示的圖形。

 

圖3  紅藍色線性漸變

      若修改background屬性的設置爲:

        background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

       可在頁面中顯示如圖4所示的圖形。

 

圖4  七彩漸變圖

若定義.box定義樣式規則以下：

  .box

  {

    position: relative;

    height:200px;

    width: 200px;

    background: repeating-linear-gradient(to right,

                  #BC8F8F 0, #BC8F8F 2px,

                  #FF1493 2px, #FF1493 66px,

                  #BC8F8F 66px );

  }

  .box:before

  {

     content: "";

     position: absolute;

     width: 200px;

     height: 200px;

     transform: rotate(90deg);

     background: repeating-linear-gradient(to right,

                  #BC8F8F 0,#BC8F8F 2px,

                  transparent 2px, transparent 66px,

                  #BC8F8F 66px );

  }

可在頁面中顯示如圖5所示的圖形。

 

圖5  3*3方格圖

      將圖5所示的方格繪製到立方體的六個面上，造成一個魔方。定義關鍵幀，使得魔方旋轉起來。

      編寫的HTML文件以下。

<!DOCTYPE html>
<html>
<head>
<title>3D魔方</title>
<style>
  .container
  {
     margin: 0 auto;
     width: 400px;
     height:400px;
     background:#d8d8d8;
     border: 4px solid rgba(255, 0, 0, 0.9);
     border-radius: 10%;
  }
  .cube 
  {
     position: relative;
     margin: 100px auto;
     width: 200px;
     height: 200px;
     transform-style: preserve-3d;
     animation: rotateCube 8s linear infinite;
  }
  @keyframes rotateCube 
  {
      0%   { transform: rotateX(0) rotateY(0); }
      100% { transform: rotateX(360deg) rotateY(360deg); }
  }
  .side
  {
     position: absolute;
     width: 200px;
     height: 200px;
  }
  .side:before 
  {
     content: "";
     position: absolute;
     width: 200px;
     height: 200px;
     transform: rotate(90deg);
     background: repeating-linear-gradient(to right,
                  #BC8F8F 0,#BC8F8F 2px,
                  transparent 2px, transparent 66px,
                  #BC8F8F 66px );
  }
  .front 
  {
     transform: translateZ(100px);
     background: repeating-linear-gradient(to right,
                   #BC8F8F 0, #BC8F8F 2px,
                   #8B008B 2px, #8B008B 66px,
                   #BC8F8F 66px );
  }
  .back 
  {
     transform: translateZ(-100px);
     background: repeating-linear-gradient(to right,
                   #BC8F8F 0, #BC8F8F 2px,
                   #6495ED 2px, #6495ED 66px,
                   #BC8F8F 66px );
  }
  .left 
  {
     transform: translateX(-100px) rotateY(90deg);
     background: repeating-linear-gradient(to right,
                   #BC8F8F 0, #BC8F8F 2px,
                   #FFD700 2px, #FFD700 66px,
                   #BC8F8F 66px );
  }
  .right 
  {
     transform: translateX(100px) rotateY(90deg);
     background: repeating-linear-gradient(to right,
                   #BC8F8F 0, #BC8F8F 2px,
                   #FF1493 2px, #FF1493 66px,
                   #BC8F8F 66px );
  }
  .top 
  {
     transform: translateY(-100px) rotateX(90deg);
     background: repeating-linear-gradient(to right,
                   #BC8F8F 0, #BC8F8F 2px,
                   #00FF7F 2px, #00FF7F 66px,
                   #BC8F8F 66px);
  }
  .bottom 
  {
     transform: translateY(100px) rotateX(90deg);
     background: repeating-linear-gradient(to right,
                   #BC8F8F 0, #BC8F8F 2px,
                   #FFFAFA 2px, #FFFAFA 66px,
                   #BC8F8F 66px);
  }
</style>
</head>
<body>
<div class="container">
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side right"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
</div>
</body>
</html>
View Code

      在瀏覽器中打開包含這段HTML代碼的html文件，能夠呈現出如圖6所示的動畫效果。

 

圖6  旋轉的魔方

3．3D小木箱

      有了從簡單立方體到3D魔方的製做經驗，下面咱們再來製做一個3D木箱。主要是製做出形象的木箱面板。

       設頁面中有<div class='side'></div>，爲.side定義樣式規則以下：

  .side

  {

     width: 160px;

     height: 160px;

     position: relative;

     margin: 100px auto;

     padding: 16px;

     background-color: #d07f2c;

     outline: 1px solid #a66523;

     box-sizing: border-box;

  }

  .side:before,  .side:after

  {

     content: '';

     display: block;

     width: 16px;

     height: 100%;

     position: absolute;

     outline: 1px solid #a66523;

     top: 0;

  }

  .side:before

  {

     left: 0;

  }

  .side:after

  {

     right: 0;

  }

可在頁面中顯示如圖7所示的圖形。

 

圖7  面板（1）

若修改.side的樣式規則爲：

  .side

  {

     display: block;

     width: 160px;

     height: 160px;

     overflow: hidden;

     position: relative;

     border: 1px solid #a66523;

     box-sizing: border-box;

  }

  .side:before, .side:after

  {

     content: '';

     display: block;

     width: 150%;

     height: 20%;

     top: 50%;

     left: 50%;

     transform-origin: 0% 0%;

     position: absolute;

     outline: 1px solid #a66523;

     background-color: #c87a2a;

  }

  .side:before

  {

     transform: rotate(45deg) translate(-50%, -50%);

  }

  .side:after

  {

     transform: rotate(-45deg) translate(-50%, -50%);

  }

可在頁面中顯示如圖8所示的圖形。

圖8  面板（2）

      把圖8的圖形放入圖7中，兩者組合起來能夠獲得如圖9所示的面板。

 

圖9  木箱面板

      製做好了面板，咱們就能夠製做出3D木箱，並讓它旋轉起來。編寫的HTML文件以下。

<!DOCTYPE html>
<html>
<head>
<title>旋轉的3D小木箱</title>
<style>
  .container
  {
     margin: 0 auto;
     width: 400px;
     height: 400px;
     border: 4px solid rgba(255, 0, 0, 0.9);
     background:#d8d8d8;
     border-radius: 10%;
  } 
  .crate 
  {
     width: 160px;
     height: 160px;
     position: relative;
     margin: 100px auto;
     transform-style: preserve-3d;
     animation: crate-spin 10s linear infinite;
  }
  .side 
  {
     width: 100%;
     height: 100%;
     position: absolute;
     transform-style: preserve-3d;
     padding: 16px;
     background-color: #d07f2c;
     outline: 1px solid #a66523;
     box-sizing: border-box;
  }
  .side:before,  .side:after 
  {
     content: '';
     display: block;
     width: 16px;
     height: 100%;
     position: absolute;
     outline: 1px solid #a66523;
     top: 0;
  }
  .side:before 
  {
     left: 0;
  }
  .side:after 
  {
     right: 0;
  }
  .side-inner 
  {
     display: block;
     width: 100%;
     height: 100%;
     overflow: hidden;
     position: relative;
     border: 1px solid #a66523;
     box-sizing: border-box;
  }
  .side-inner:before, .side-inner:after 
  {
     content: '';
     display: block;
     width: 150%;
     height: 20%;
     top: 50%;
     left: 50%;
     transform-origin: 0% 0%;
     position: absolute;
     outline: 1px solid #a66523;
     background-color: #c87a2a;
  }
  .side-inner:before 
  {
     transform: rotate(45deg) translate(-50%, -50%);
  }
  .side-inner:after 
  {
     transform: rotate(-45deg) translate(-50%, -50%);
  }
  .crate .side .side-inner span 
  {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 10;
     font-size: 80px;
     font-family: "Cooper Black", serif;
     color: #f6f632;
  }
  .top 
  {
     transform: translateY(-80px) rotateX(90deg);
  }
  .bottom 
  {
     transform: translateY(80px) rotateX(90deg);
  }
  .left 
  {
     transform: translateX(-80px) rotateY(-90deg);
  }
  .right 
  {
     transform: translateX(80px) rotateY(90deg);
  }
  .front 
  {
     transform: translateZ(80px);
  }
  .back 
  {
     transform: translateZ(-80px) rotateY(180deg);
  }
  @keyframes crate-spin 
  {
     from { transform: rotateX(-20deg) rotateY(0deg);  }
     to   { transform: rotateX(-20deg) rotateY(-360deg); }
  }
</style>
</head>
<body>
<div class="container">
  <div class='crate'>
    <div class='side top'>
      <div class='side-inner'></div>
    </div>
    <div class='side bottom'>
      <div class='side-inner'></div>
    </div>
    <div class='side left'>
      <div class='side-inner'>
        <span>A</span>
      </div>
    </div>
    <div class='side right'>
      <div class='side-inner'>
        <span>C</span>
      </div>
    </div>
    <div class='side front'>
      <div class='side-inner'>
        <span>B</span>
      </div>
    </div>
    <div class='side back'>
      <div class='side-inner'>
        <span>D</span>
      </div>
    </div>
  </div>
</div>
</body>
</html>
View Code

      在瀏覽器中打開包含這段HTML代碼的html文件，能夠呈現出如圖10所示的動畫效果。

 

圖10  旋轉的小木箱

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程