CSS3 2D和3D圖形與動畫效果

作者：adobe 2013-01-30 16:15:40

本文包含定義 CSS3 選擇器來創建 3D 效果和 3D 動畫效果的示例。具體來說，您將學習如何使用 CSS3 過渡、CSS3keyframe 規則和 CSS3 函數 scale3d()、rotate3d()、和translate3d()，它們使您能夠使用純 CSS3 創建一個有動畫效果的 3D 立方體。本文中的代碼示例和圖像摘自圖書 HTML5 Canvas and CSS3 Graphics Primer （在本文末尾處提供了更多詳細信息）。

使用 CSS3 轉換構建基于 CSS3 的立方體

為了創建和渲染帶有漸變陰影的 3D 立方體，您可以使用 CSS3 轉換 rotate()、scale() 和 skew()。

清單 1.1 顯示了 3DCube1.html 的內容，而清單 1.2 顯示了 3DCube1.css 的內容，它們說明如何在 CSS3 中模擬一個立方體。

清單 1.1 3DCube1.html

<!DOCTYPE html> 
<html lang="en"> 
<head>    
<title>CSS 3D Cube Example</title>    
  <meta charset="utf-8" /> 
  <link href="3DCSS1.css" rel="stylesheet" type="text/css"> 
</head> 
 
<body> 
  <header> 
   <h1>Hover Over the Cube Faces:</h1> 
  </header> 
 <div id="outer">                       
  <div id="top">Text1</div> 
  <div id="left">Text2</div> 
  <div id="right">Text3</div> 
 </div>                         
</body> 
</html>

清單 1.1 是一個簡單的 HTML 頁面，引用了 CSS 樣式表 3DCSS1.css，其中包含的 CSS3 選擇器用于在該 Web 頁面中設置 HTML <div> 元素的樣式。

清單 1.2 3DCube1.css

/* animation effects */  
#right:hover {  
-webkit-transition: -webkit-transform 3.0s ease;  
transition: transform 3.0s ease;  
 
-webkit-transform : scale(1.2) skew(-10deg, -30deg) rotate(-45deg);  
transform : scale(1.2) skew(-10deg, -30deg) rotate(-45deg);  
}  
#left:hover {  
-webkit-transition: -webkit-transform 2.0s ease;  
transition: transform 2.0s ease;  
 
-webkit-transform : scale(0.8) skew(-10deg, -30deg) rotate(-45deg);  
transform : scale(0.8) skew(-10deg, -30deg) rotate(-45deg);  
}  
#top:hover {  
-webkit-transition: -webkit-transform 2.0s ease;  
transition: transform 2.0s ease;  
 
-webkit-transform : scale(0.5) skew(-20deg, -30deg) rotate(45deg);  
transform : scale(0.5) skew(-20deg, -30deg) rotate(45deg);  
}  
 
/* size and position */  
#right, #left, #top {    
position:relative;  padding: 0px;  width: 200px;  height: 200px;  
}  
#left {  
  font-size: 48px;  
  left: 20px;  
 
  background-image:  
    -webkit-radial-gradient(red 4px, transparent 28px),  
    -webkit-repeating-radial-gradient(red 0px,  yellow 4px, green 8px,   
                                      red 12px, transparent 26px,   
                                      blue 20px, red 24px,  
                                      transparent 28px, blue 12px),  
    -webkit-repeating-radial-gradient(red 0px,  yellow 4px, green 8px,   
                                      red 12px, transparent 26px,   
                                      blue 20px, red 24px,      
                                      transparent 28px, blue 12px);  
 
  background-size: 100px 40px, 40px 100px;  
  background-position: 0 0;  
 
  -webkit-transform: skew(0deg, 30deg);  
}  
 
#right {  
  font-size: 48px;  
  width:  170px;  
  top: -192px;  
  left: 220px;  
 
  background-image:  
    -webkit-radial-gradient(red 4px, transparent 48px),  
    -webkit-repeating-linear-gradient(0deg, red 5px,  green 4px,   
                                      yellow 8px, blue 12px,   
                                      transparent 16px, red 20px,  
                                      blue 24px, transparent 28px,  
                                      transparent 32px),  
    -webkit-radial-gradient(blue 8px, transparent 68px);  
 
  background-size: 120px 120px, 24px 24px;  
  background-position: 0 0;  
 
  -webkit-transform: skew(0deg, -30deg);  
}  
 
#top {  
  font-size: 48px;  
  top: 50px;  
  left: 105px;  
 
  background-image:  
    -webkit-radial-gradient(white 2px, transparent 8px),  
    -webkit-repeating-linear-gradient(45deg, white 2px,  yellow 8px,   
                                      green 4px, red 12px,   
                                      transparent 26px, blue 20px,  
                                      red 24px, transparent 28px,   
                                      blue 12px),  
    -webkit-repeating-linear-gradient(-45deg, white 2px,  yellow 8px,   
                                      green 4px, red 12px,   
                                      transparent 26px, blue 20px,  
                                      red 24px, transparent 28px,   
                                      blue 12px);  
 
  background-size: 100px 30px, 30px 100px;  
  background-position: 0 0;  
 
  -webkit-transform: rotate(60deg) skew(0deg, -30deg); scale(1, 1.16);  
}

清單 1.2 中的前三個選擇器定義用戶將鼠標懸停在立方體的上、左或右側面時的動畫效果。具體來說，只要用戶將鼠標懸停在立方體的右側面，#right:hover 選擇器就在三秒鐘的間隔內執行動畫效果，如下所示：

#right:hover {  
-webkit-transition: -webkit-transform 3.0s ease;  
transition: transform 3.0s ease;  
 
-webkit-transform : scale(1.2) skew(-10deg, -30deg) rotate(-45deg);  
transform: scale(1.2) skew(-10deg, -30deg) rotate(-45deg);  
}

您已熟悉 transition 屬性，請注意 transform 屬性指定 CSS3 轉換函數 scale()、skew() 和 rotate()。本文假設您之前曾經使用過這些轉換函數。（如果您希望了解有關這些函數的更多信息，您可以在 HTML5 Canvas and CSS3 Graphics Primer 中找到詳細信息,也可以閱讀Chris Coyier 的帖子，主題：轉換)。同時應用這三個函數，意味著您將看到縮放、斜切和旋轉效果同時發生，而不是按順序先后發生。

清單 1.2 中的最后三個選擇器定義立方體每個側面的屬性。例如，#left 選擇器指定某些文本的字體大小，以及立方體左側面的位置屬性。 #left 選擇器最復雜的部分是 background-image 的屬性值，它由一個 WebKit 特定的徑向漸變組合、重復的徑向漸變和另一個徑向漸變組成。請注意，左側面是一個矩形，使用這行代碼將它轉換成一個平行四邊形：

-webkit-transform: skew(0deg, -30deg);

#top 選擇器和 #right 選擇器含有與 #left 選擇器相近的代碼，您可以嘗試修改它們的值，以創建其他漂亮的視覺效果。

圖 1.1 顯示將3DCube1.css 中的 CSS 選擇器應用到 HTML 頁面 3DCube1.html 中的 <div> 元素的效果。

[[63034]]

圖 1.1 一個基于 CSS3 的立方體。

CSS3 過渡

CSS3 過渡涉及以平滑的方式更改 CSS 值，并且它們都是由用戶手勢（比如鼠標點擊、光標或“懸停”效果）觸發的。

WebKit 最初開發了 CSS3 過渡，并且通過使用瀏覽器特定的前綴，在 Safari、Chrome（3.2 或更高版本）、Opera（10.5 或更高版本）及 Firefox（4.0 或更高版本）中也支持它們，您會在本節稍后看到該內容。請記住，有些工具包（比如 jQuery 和 Prototype）將類似的過渡效果作為其基于 CSS3 的變體，并提供支持。

創建 CSS 過渡的基本語法是一個“三元函數”，指定：

一個 CSS 屬性

持續時間（以秒為單位）

一個過渡計時函數

以下是一個基于 WebKit 的過渡的示例：

-webkit-transition-property: background;  
-webkit-transition-duration: 0.5s;  
-webkit-transition-timing-function: ease;

幸運的是，您還可以將這些過渡整合為一行代碼，如下所示：

-webkit-transition: background 0.5s ease;

以下是包括了這些過渡的 CSS3 選擇器示例：

a.foo {  
padding: 3px 6px;  
background: #f00;  
-webkit-transition: background 0.5s ease;  
}  
 
a.foo:focus, a.foo:hover {  
background: #00f;  
}

目前過渡需要瀏覽器特定的前綴，以便它們在不是基于 WebKit 的瀏覽器中可以正常工作。以下是一個適用于 Internet Explorer、Firefox 和 Opera 的示例：

-ms-transition: background 0.5s ease;    
-moz-transition: background 0.5s ease;    
-o-transition: background 0.5s ease;

目前，您可以指定以下其中一個過渡計時函數（使用瀏覽器特定的前綴）：

ease

ease-in

ease-out

ease-in-out

cubic-bezier

如果這些過渡函數不能滿足您的需要，可以使用 Ceaser CSS Easing Animation Tool 創建自定義函數。

您可以使用–webkit-transition-property 指定多個屬性。 Mozilla Developer Network 在其文章Using CSS transitions中列出了過渡屬性。

有多列文本的 CSS3 動畫效果

CSS3 支持多列文本，若一個 Web 頁面包含大量文本，它可以創建非常漂亮的視覺效果。

清單 1.3 顯示了本。 MultiColumns.html 的內容，清單 1.4 顯示了 MultiColumns.css 的內容，它們說明如何渲染多列文本。

清單 1.3 MultiColumns.html

<!doctype html> 
<html lang=”en”> 
<head> 
  <title>CSS Multi Columns Example</title> 
  <meta charset="utf-8" /> 
  <link href="MultiColumns.css" rel="stylesheet" type="text/css"> 
</head> 
 
<body> 
  <header> 
   <h1>Hover Over the Multi-Column Text:</h1> 
  </header> 
 
  <div id="outer"> 
   <p id="line1"></p> 
   <article> 
     <div id="columns"> 
      <p> CSS enables you to define selectors that specify the style  
          or the manner in which you want to render elements in an HTML page.  
          CSS helps you modularize your HTML content and since you can place your  
          CSS definitions in a separate file, you can also re-use the same CSS  
          definitions in multiple HTML files.  
      </p> 
      <p>  Moreover, CSS also enables you to simplify the updates that you  
           need to make to elements in HTML pages.  For example, suppose that   
           multiple HTML table elements use a CSS rule that specifies the color   
           red. If you later need to change the color to blue, you can effect such a    
           change simply by making one change (i.e., changing red to  
           blue) in one CSS rule.   
      </p>   
      <p>  Without a CSS rule, you would be forced to manually update the  
           color attribute in every HTML table element that is affected,   
           which is error-prone, time-consuming, and extremely inefficient.  
      <p>   
     </div> 
   </article> 
   <p id="line1"></p> 
  </div> 
</body> 
</html>

清單 1.3 中的 HTML5 頁面包含語義標記（在我的書 HTML5 Canvas and CSS3 Graphics Primer 中有所討論），它渲染多個 HTML <p> 元素中的文本。如您所見，此 HTML5 頁面很簡單，多列效果在清單 1.4 所示的 CSS 樣式表 MultiColumns.css 中進行定義。

清單 1.4 MultiColumn1.css

/* animation effects */  
#columns:hover {  
-webkit-transition: -webkit-transform 3.0s ease;  
transition: transform 3.0s ease;  
    
-webkit-transform : scale(0.5) skew(-20deg, -30deg) rotate(45deg);  
transform : scale(0.5) skew(-20deg, -30deg) rotate(45deg);  
}  
 
#line1:hover {  
-webkit-transition: -webkit-transform 3.0s ease;  
transition: transform 3.0s ease;  
 
-webkit-transform : scale(0.5) skew(-20deg, -30deg) rotate(45deg);  
transform : scale(0.5) skew(-20deg, -30deg) rotate(45deg);  
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,   
                                   from(#fff), to(#00f));  
background-image: -gradient(linear, 0% 0%, 0% 100%,   
                            from(#fff), to(#00f));  
-webkit-border-radius: 8px;border-radius: 8px;}  
 
#columns {  
-webkit-column-count : 3;  
-webkit-column-gap : 80px;  
-webkit-column-rule : 1px solid rgb(255,255,255);  
column-count : 3;  
column-gap : 80px;  
column-rule : 1px solid rgb(255,255,255);  
}  
 
#line1 {  
width:100%;  
height:20px;  
color: red;  
font-size: 24px;  
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,   
                                   from(#fff), to(#f00));  
background-image: -gradient(linear, 0% 0%, 0% 100%,   
                            from(#fff), to(#f00));  
-webkit-border-radius: 4px;border-radius: 4px;  
}

只要用戶將鼠標懸停在 id 屬性是columns 或 line1 的 <div> 元素上，清單 1.4 中的前兩個選擇器就會創建一個動畫效果。兩個選擇器都使用 CSS3 函數 scale()、skew() 和 rotate()，在三秒鐘時間間隔內創建一個動畫效果，如下所示：

-webkit-transition: -webkit-transform 3.0s ease;  
transition: transform 3.0s ease;    
-webkit-transform : scale(0.5) skew(-20deg, -30deg) rotate(45deg);

第二個選擇器還定義了一個線性漸變背景效果。

清單 1.4 中的 #columns 選擇器包含三個與布局相關的屬性。 column-count 屬性是 3，因此文本顯示為三列；column-gap 屬性是 80px，所以相鄰兩列之間的空間為 80 像素；column-rule 屬性指定一個白色背景。

#line1 選擇器指定一個線性漸變，在多列文本的上方和下方均創建一種漂亮的視覺效果。

圖 1.2 顯示應用 MultiColumns.css 中的 CSS 選擇器，在 HTML 頁面 MultiColumns.html 中渲染多列文本的結果。

圖 1.2 CSS3 中的多列文本

CSS3 3D 動畫效果

正如您現在已經知道的，CSS3 支持在不同的時間點使用關鍵幀創建動畫效果（和這些效果的持續時間）。本節中的示例使用 CSS3 keyframe 規則和 CSS3 函數 scale3d()、rotate3d()及translate3d() 的多種組合，以創建持續時間為四分鐘的一種動畫效果。

清單1.5 顯示了 Anim240Flicker3DLGrad4.html 的內容，它是一個非常簡單的 HTML 頁面，其中包含四個 <div> 元素。

清單 1.5 Anim240Flicker3DLGrad4.html

<!DOCTYPE html> 
<html lang=”en”> 
<head> 
  <title>CSS3 Animation Example</title> 
  <meta charset="utf-8" /> 
  <link href="Anim240Flicker3DLGrad4.css" rel="stylesheet" type="text/css"> 
</head> 
        
<body>                     
 <div id="outer">          
  <div id="linear1">Text1</div> 
  <div id="linear2">Text2</div> 
  <div id="linear3">Text3</div> 
  <div id="linear4">Text4</div> 
 </div> 
</body> 
</html>

清單 1.5 是一個非常簡單的 HTML5 頁面，它包含相應的 CSS 選擇器（如清單 1.6 所示）。和平常一樣，真正復雜性發生在包含用于創建動畫效果的代碼的 CSS 選擇器中。

由于Anim240Flicker3DLGrad4.css 是一個非常長的代碼示例，清單 1.5 中只顯示了其中一部分代碼。但是，本文的可下載文件提供了完整的代碼。

清單 1.6 Anim240Flicker3DLGrad4.css

@-webkit-keyframes upperLeft {  
   0% {  
      -webkit-transform: matrix(1.5, 0.5,  0.0, 1.5, 0, 0)  
                         matrix(1.0, 0.0,  1.0, 1.0, 0, 0);  
   }  
   1% {  
      -webkit-transform: translate3d(50px,50px,50px)  
                         rotate3d(50,50,50,-90deg)  
                         skew(-15deg,0) scale3d(1.25, 1.25, 1.25);  
   }  
   2% {  
      -webkit-transform: matrix(1.0, 1.5, -0.5, 1.0, 0, 0)  
                         matrix(0.5, 0.5,  0.5, 0.5, 0, 0);  
   }  
   25% {  
      -webkit-transform: matrix(0.4, 0.5,  0.5, 0.3, 250, 50)  
                         matrix(0.3, 0.5, -0.5, 0.4, 50, 150);  
   }  
   // similar code omitted  
   90% {  
      -webkit-transform: matrix(2.0, 0.5,  1.0, 2.0, 0, 0)  
                         matrix(1.5, 0.0,  0.5, 2.5, 0, 0);  
   }  
   95% {  
      -webkit-transform: translate3d(-50px,-50px,-50px)  
                         rotate3d(-50,-50,-50, 120deg)  
                         skew(135deg,0) scale3d(0.3, 0.4, 0.5);  
   }  
   96% {  
      -webkit-transform: matrix(0.2, 0.3, -0.5, 0.5, 100, 200)  
                         matrix(0.4, 0.5,  0.5, 0.2, 200, 50);  
   }  
   97% {  
      -webkit-transform: translate3d(50px,-50px,50px)  
                         rotate3d(-50,50,-50, 120deg)  
                         skew(315deg,0) scale3d(0.5, 0.4, 0.3);  
   }  
   98% {  
      -webkit-transform: matrix(0.4, 0.5,  0.5, 0.3, 200, 50)  
                         matrix(0.3, 0.5, -0.5, 0.4, 50, 150);  
   }  
   99% {  
      -webkit-transform: translate3d(150px,50px,50px)  
                         rotate3d(60,80,100, 240deg)  
                         skew(315deg,0) scale3d(1.0, 0.7, 0.3);  
   }  
   100% {  
      -webkit-transform: matrix(1.0, 0.0,  0.0, 1.0, 0, 0)  
                         matrix(1.0, 0.5,  1.0, 1.5, 0, 0);  
   }  
}  
// code omitted for brevity  
#linear1 {  
font-size: 96px;  
text-stroke: 8px blue;  
text-shadow: 8px 8px 8px #FF0000;  
width:  400px;  
height: 250px;  
 
position: relative; top: 0px; left: 0px;  
 
background-image: -webkit-gradient(linear, 100% 50%, 0% 100%,   
                                   from(#f00),   
                                   color-stop(0.2, orange),   
                                   color-stop(0.4, yellow),   
                                   color-stop(0.6, blue),  
                                   color-stop(0.8, green),   
                                   to(#00f));  
// similar code omitted  
-webkit-border-radius: 4px;  
border-radius: 4px;  
-webkit-box-shadow:  30px 30px 30px #000;  
-webkit-animation-name: upperLeft;  
-webkit-animation-duration: 240s;  
}  
Listing 1.6 contains a Webkit-specific keyframe definition called upperLeft that starts with the following line:  
@-webkit-keyframes upperLeft {  
// percentage-based definitions go here  
}

#linear 選擇器包含您已經看過的屬性，還有一個引用由 lowerLeft 標識的 keyframe 的屬性，以及一個指定持續時間為 240 秒的屬性，如下所示：

#linear1 {  
// code omitted for brevity  
-webkit-animation-name: lowerLeft;  
-webkit-animation-duration: 240s;  
}

現在您已經知道了如何將 keyframe 定義關聯到一個選擇器（然后選擇器又被應用到一個 HTML 元素選擇器），讓我們來看看 lowerLeft 的詳細定義，其中包含 19 個元素，指定不同的動畫效果。 lowerLeft 的每一個元素在動畫過程的特定階段發生。例如，lowerLeft 中的第八個元素指定的值為 50%，這意味著它將在動畫效果的中點處發生。由于 #linear 選擇器包含一個 –webkit-animation-duration 屬性，它的值是 240s（在清單 1.6 中以粗體顯示），這意味著動畫將持續 4 分鐘，從 HTML5 頁面啟動的時間點開始計算。

lowerLeft 的第八個元素指定平移、旋轉、斜切和縮放效果（所有這一切都以三維表示），其示例如下所示：

50% {  
   -webkit-transform: translate3d(250px,250px,250px)  
                      rotate3d(250px,250px,250px,-120deg)  
                      skew(-65deg,0) scale3d(0.5, 0.5, 0.5);  
}

動畫效果按順發生，從平移開始，以縮放效果結束，對于 lowerLeft 中的其他元素也同樣如此。

圖 1.3 顯示將在 CSS3 樣式表 Anim240Flicker3DLGrad4.css中定義的 CSS3 選擇器應用到HTML 頁面 Anim240Flicker3DLGrad4.html 中 HTML 元素的初始視圖。

圖 1.3：應用 CSS3 樣式表中定義的 CSS3 選擇器的初始視圖。

下一步閱讀方向

您可以在以下網址找到更多 CSS3 和 HTML5 Canvas 的代碼示例：

http://code.google.com/p/css3-graphics/

http://code.google.com/p/html5-canvas-graphics/

本文中的示例和文本摘自我的書 HTML5 Canvas and CSS3 Graphics Primer，該書還介紹了如何渲染貝塞爾曲線，應用顏色和漸變，轉換 2D 形狀和 JPG 文件，創建動畫效果，創建 2D/3D 條形圖和線形圖，處理鼠標事件，以及井字游戲的原理。隨書附送的 DVD 包含了書中所有源代碼和彩色圖形。HTML5 Canvas and CSS3 Graphics Primer 包含了 CSS3、HTML5 Canvas 和 SVG 的代碼示例。

責任編輯：Yeva 來源： adobe.com

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

CSS3 2D和3D圖形與動畫效果