CSS3 2D和3D圖形與動(dòng)畫效果
本文包含定義 CSS3 選擇器來創(chuàng)建 3D 效果和 3D 動(dòng)畫效果的示例。 具體來說，您將學(xué)習(xí)如何使用 CSS3 過渡、CSS3keyframe 規(guī)則和 CSS3 函數(shù) scale3d()、rotate3d()、和translate3d()，它們使您能夠使用純 CSS3 創(chuàng)建一個(gè)有動(dòng)畫效果的 3D 立方體。 本文中的代碼示例和圖像摘自圖書 HTML5 Canvas and CSS3 Graphics Primer （在本文末尾處提供了更多詳細(xì)信息）。
使用 CSS3 轉(zhuǎn)換構(gòu)建基于 CSS3 的立方體
為了創(chuàng)建和渲染帶有漸變陰影的 3D 立方體，您可以使用 CSS3 轉(zhuǎn)換 rotate()、scale() 和 skew()。
清單 1.1 顯示了 3DCube1.html 的內(nèi)容，而清單 1.2 顯示了 3DCube1.css 的內(nèi)容，它們說明如何在 CSS3 中模擬一個(gè)立方體。
清單 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 是一個(gè)簡單的 HTML 頁面，引用了 CSS 樣式表 3DCSS1.css，其中包含的 CSS3 選擇器用于在該 Web 頁面中設(shè)置 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 中的前三個(gè)選擇器定義用戶將鼠標(biāo)懸停在立方體的上、左或右側(cè)面時(shí)的動(dòng)畫效果。 具體來說，只要用戶將鼠標(biāo)懸停在立方體的右側(cè)面，#right:hover 選擇器就在三秒鐘的間隔內(nèi)執(zhí)行動(dòng)畫效果，如下所示：
- #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 轉(zhuǎn)換函數(shù) scale()、skew() 和 rotate()。 本文假設(shè)您之前曾經(jīng)使用過這些轉(zhuǎn)換函數(shù)。 （如果您希望了解有關(guān)這些函數(shù)的更多信息，您可以在 HTML5 Canvas and CSS3 Graphics Primer 中找到詳細(xì)信息,也可以閱讀Chris Coyier 的帖子，主題：轉(zhuǎn)換)。 同時(shí)應(yīng)用這三個(gè)函數(shù)，意味著您將看到縮放、斜切和旋轉(zhuǎn)效果同時(shí)發(fā)生，而不是按順序先后發(fā)生。
清單 1.2 中的最后三個(gè)選擇器定義立方體每個(gè)側(cè)面的屬性。 例如，#left 選擇器指定某些文本的字體大小，以及立方體左側(cè)面的位置屬性。 #left 選擇器最復(fù)雜的部分是 background-image 的屬性值，它由一個(gè) WebKit 特定的徑向漸變組合、重復(fù)的徑向漸變和另一個(gè)徑向漸變組成。 請注意，左側(cè)面是一個(gè)矩形，使用這行代碼將它轉(zhuǎn)換成一個(gè)平行四邊形：
- -webkit-transform: skew(0deg, -30deg);
#top 選擇器和 #right 選擇器含有與 #left 選擇器相近的代碼，您可以嘗試修改它們的值，以創(chuàng)建其他漂亮的視覺效果。
圖 1.1 顯示將3DCube1.css 中的 CSS 選擇器應(yīng)用到 HTML 頁面 3DCube1.html 中的 <div> 元素的效果。
圖 1.1 一個(gè)基于 CSS3 的立方體。
CSS3 過渡
CSS3 過渡涉及以平滑的方式更改 CSS 值，并且它們都是由用戶手勢（比如鼠標(biāo)點(diǎn)擊、光標(biāo)或“懸停”效果）觸發(fā)的。
WebKit 最初開發(fā)了 CSS3 過渡，并且通過使用瀏覽器特定的前綴，在 Safari、Chrome（3.2 或更高版本）、Opera（10.5 或更高版本）及 Firefox（4.0 或更高版本）中也支持它們，您會(huì)在本節(jié)稍后看到該內(nèi)容。 請記住，有些工具包（比如 jQuery 和 Prototype）將類似的過渡效果作為其基于 CSS3 的變體，并提供支持。
創(chuàng)建 CSS 過渡的基本語法是一個(gè)“三元函數(shù)”，指定：
一個(gè) CSS 屬性
持續(xù)時(shí)間（以秒為單位）
一個(gè)過渡計(jì)時(shí)函數(shù)
以下是一個(gè)基于 WebKit 的過渡的示例：
- -webkit-transition-property: background;
- -webkit-transition-duration: 0.5s;
- -webkit-transition-timing-function: ease;
幸運(yùn)的是，您還可以將這些過渡整合為一行代碼，如下所示：
- -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 的瀏覽器中可以正常工作。 以下是一個(gè)適用于 Internet Explorer、Firefox 和 Opera 的示例：
- -ms-transition: background 0.5s ease;
- -moz-transition: background 0.5s ease;
- -o-transition: background 0.5s ease;
目前，您可以指定以下其中一個(gè)過渡計(jì)時(shí)函數(shù)（使用瀏覽器特定的前綴）：
ease
ease-in
ease-out
ease-in-out
cubic-bezier
如果這些過渡函數(shù)不能滿足您的需要，可以使用 Ceaser CSS Easing Animation Tool 創(chuàng)建自定義函數(shù)。
您可以使用–webkit-transition-property 指定多個(gè)屬性。 Mozilla Developer Network 在其文章Using CSS transitions中列出了過渡屬性。
有多列文本的 CSS3 動(dòng)畫效果
CSS3 支持多列文本，若一個(gè) Web 頁面包含大量文本，它可以創(chuàng)建非常漂亮的視覺效果。
清單 1.3 顯示了本。 MultiColumns.html 的內(nèi)容，清單 1.4 顯示了 MultiColumns.css 的內(nèi)容，它們說明如何渲染多列文本。
清單 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 頁面包含語義標(biāo)記（在我的書 HTML5 Canvas and CSS3 Graphics Primer 中有所討論），它渲染多個(gè) HTML <p> 元素中的文本。 如您所見，此 HTML5 頁面很簡單，多列效果在清單 1.4 所示的 CSS 樣式表 MultiColumns.css 中進(jìn)行定義。
清單 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;
- }
只要用戶將鼠標(biāo)懸停在 id 屬性是columns 或 line1 的 <div> 元素上，清單 1.4 中的前兩個(gè)選擇器就會(huì)創(chuàng)建一個(gè)動(dòng)畫效果。 兩個(gè)選擇器都使用 CSS3 函數(shù) scale()、skew() 和 rotate()，在三秒鐘時(shí)間間隔內(nèi)創(chuàng)建一個(gè)動(dòng)畫效果，如下所示：
- -webkit-transition: -webkit-transform 3.0s ease;
- transition: transform 3.0s ease;
- -webkit-transform : scale(0.5) skew(-20deg, -30deg) rotate(45deg);
第二個(gè)選擇器還定義了一個(gè)線性漸變背景效果。
清單 1.4 中的 #columns 選擇器包含三個(gè)與布局相關(guān)的屬性。 column-count 屬性是 3，因此文本顯示為三列；column-gap 屬性是 80px，所以相鄰兩列之間的空間為 80 像素；column-rule 屬性指定一個(gè)白色背景。
#line1 選擇器指定一個(gè)線性漸變，在多列文本的上方和下方均創(chuàng)建一種漂亮的視覺效果。
圖 1.2 顯示應(yīng)用 MultiColumns.css 中的 CSS 選擇器，在 HTML 頁面 MultiColumns.html 中渲染多列文本的結(jié)果。
圖 1.2 CSS3 中的多列文本
CSS3 3D 動(dòng)畫效果
正如您現(xiàn)在已經(jīng)知道的，CSS3 支持在不同的時(shí)間點(diǎn)使用關(guān)鍵幀創(chuàng)建動(dòng)畫效果（和這些效果的持續(xù)時(shí)間）。 本節(jié)中的示例使用 CSS3 keyframe 規(guī)則和 CSS3 函數(shù) scale3d()、rotate3d()及translate3d() 的多種組合，以創(chuàng)建持續(xù)時(shí)間為四分鐘的一種動(dòng)畫效果。
清單1.5 顯示了 Anim240Flicker3DLGrad4.html 的內(nèi)容，它是一個(gè)非常簡單的 HTML 頁面，其中包含四個(gè) <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 是一個(gè)非常簡單的 HTML5 頁面，它包含相應(yīng)的 CSS 選擇器（如清單 1.6 所示）。 和平常一樣，真正復(fù)雜性發(fā)生在包含用于創(chuàng)建動(dòng)畫效果的代碼的 CSS 選擇器中。
由于Anim240Flicker3DLGrad4.css 是一個(gè)非常長的代碼示例，清單 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 選擇器包含您已經(jīng)看過的屬性，還有一個(gè)引用由 lowerLeft 標(biāo)識的 keyframe 的屬性，以及一個(gè)指定持續(xù)時(shí)間為 240 秒的屬性，如下所示：
- #linear1 {
- // code omitted for brevity
- -webkit-animation-name: lowerLeft;
- -webkit-animation-duration: 240s;
- }
現(xiàn)在您已經(jīng)知道了如何將 keyframe 定義關(guān)聯(lián)到一個(gè)選擇器（然后選擇器又被應(yīng)用到一個(gè) HTML 元素選擇器），讓我們來看看 lowerLeft 的詳細(xì)定義，其中包含 19 個(gè)元素，指定不同的動(dòng)畫效果。 lowerLeft 的每一個(gè)元素在動(dòng)畫過程的特定階段發(fā)生。 例如，lowerLeft 中的第八個(gè)元素指定的值為 50%，這意味著它將在動(dòng)畫效果的中點(diǎn)處發(fā)生。 由于 #linear 選擇器包含一個(gè) –webkit-animation-duration 屬性，它的值是 240s（在清單 1.6 中以粗體顯示），這意味著動(dòng)畫將持續(xù) 4 分鐘，從 HTML5 頁面啟動(dòng)的時(shí)間點(diǎn)開始計(jì)算。
lowerLeft 的第八個(gè)元素指定平移、旋轉(zhuǎn)、斜切和縮放效果（所有這一切都以三維表示），其示例如下所示：
- 50% {
- -webkit-transform: translate3d(250px,250px,250px)
- rotate3d(250px,250px,250px,-120deg)
- skew(-65deg,0) scale3d(0.5, 0.5, 0.5);
- }
動(dòng)畫效果按順發(fā)生，從平移開始，以縮放效果結(jié)束，對于 lowerLeft 中的其他元素也同樣如此。
圖 1.3 顯示將在 CSS3 樣式表 Anim240Flicker3DLGrad4.css中定義的 CSS3 選擇器應(yīng)用到HTML 頁面 Anim240Flicker3DLGrad4.html 中 HTML 元素的初始視圖。
圖 1.3： 應(yīng)用 CSS3 樣式表中定義的 CSS3 選擇器的初始視圖。
下一步閱讀方向
您可以在以下網(wǎng)址找到更多 CSS3 和 HTML5 Canvas 的代碼示例：
http://code.google.com/p/css3-graphics/
http://code.google.com/p/html5-canvas-graphics/
本文中的示例和文本摘自我的書 HTML5 Canvas and CSS3 Graphics Primer，該書還介紹了如何渲染貝塞爾曲線，應(yīng)用顏色和漸變，轉(zhuǎn)換 2D 形狀和 JPG 文件，創(chuàng)建動(dòng)畫效果，創(chuàng)建 2D/3D 條形圖和線形圖， 處理鼠標(biāo)事件，以及井字游戲的原理。 隨書附送的 DVD 包含了書中所有源代碼和彩色圖形。HTML5 Canvas and CSS3 Graphics Primer 包含了 CSS3、HTML5 Canvas 和 SVG 的代碼示例。
本文內(nèi)容僅用于演示，已獲得版權(quán)所有者 Mercury Learning 的許可。 本文沒有授予任何其他權(quán)利。
