/ CSS

[CSS tech.] CSS 3 2D Transforms, Transition 動態效果筆記

IE 退散!往後面站,往後面站,往後面站...

在 CSS3 的規範裡面,新增了對於動態效果的設定。關於這方面的資訊,可以參考 W3C 的文件,相信比看我在這邊廢話要來的好很多(肯定的)。在基於 Webkit 的瀏覽器核心底下(我是使用 Chrome) ,這些效果都能夠正常的顯示,不過,總覺得用太多並不是件好事,似乎很吃系統資源的樣子,在我測試幾次之後,還差點讓 Chrome 掛點(我在 Windows 7 系統下測試)。

CSS 2D Transforms 的原理其實不難,因為困難的運算都交給瀏覽器去做,剩下的只是設定問題。不過我總覺得其實,在設定上才是一件很困難的事情(沒有誤),再加上本人數學實在是爛到靠北,在寫這種動態的時候更是難過(掩面)。這裡簡單介紹一下這些動態屬性,當然,一切以 -webkit 為主(怎麼樣,打我啊)!

  • -webkit-transform 指定轉換的方式,其方式有:
    • matrix
    • translate
    • translateX
    • translateY
    • scale
    • scaleX
    • scaleY
    • rotate
    • skew
    • skewX
    • skewY

以上的轉換可以參考 這個網站,裡面可以把玩部分轉換特效。至於那個比較特別的矩陣變換(matrix),在 W3C 是有很完整的解釋,不過礙於在下數學太爛,所以完全看不懂他在幹嘛(喂),在這裡有一個 矩陣變換的操作 可以把玩,這樣應該比較容易理解(鏡射效果基本上就可以用他來快速達成),另外,這個矩陣變換跟 Flash 裡的矩陣變換是一樣的。

  • -webkit-transform-origin
    指定轉換的 原點(相對於原物件),也可以指定單一數值,這樣的話第二個數值會自動指定為置中(center)。可以指定的兩個數值分別是相對於原物件原點的 X, Y 值,允許使用負值。
    • -webkit-transition-property
    • -webkit-transition-duration
    • -webkit-transition-timing-function
    • -webkit-transition-delay

以上的東西 在這裡(還有 中文翻譯版本)有很完整的介紹。老實說看完之後我已經不知道我要寫啥了(喂喂喂)。不過我要附帶一提的是,基本上連 -webkit-transform, -webkit-transform-origin 也可以是 transition 的變換對象(property)的。

所以,他可以做到什麼事情?請看 這個範例!他是怎麼做到的呢?其實說穿了就是好幾個 DIV 層疊起來的結果,只是,這些堆疊的 DIV 其實應該是依照某種規則去定位的,不過由於我數學太爛,目前還不知道到底整個三角函數運算跟旋轉到底是怎麼回事,只好留給高人指點了(喂)。

雖然說我自己也硬刻了一個,但是沒辦法追到原理實在讓人賭爛啊(這就叫鑽牛角尖嗎?)!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Pure CSS3 Page Flip Effect</title> 
    <style type="text/css"> 
        body
        {
            padding: 0;
            margin: 0;
        }
        
        #pageflip
        {
            margin: 100px auto;
            width: 400px;
            height: 200px;
            padding: 0 0 50px 0;
            overflow: hidden;
        }
        #all
        {
            position: relative;
            border: 1px dashed #ff3333;
            width: 400px;
            height: 200px;
        }
        
        #page1
        {
            position: absolute;
            background-color: #ff3366;
            width: 200px;
            height: 200px;
            left: 200px;
            z-index: 1;
        }

        #page2
        {
            position: absolute;
            background-color: #ff6633;
            width: 200px;
            height: 200px;
            z-index: 3;
            -webkit-transform-origin: 0px 0px;
            -webkit-transform: translate(380px, 15px) rotate(-66deg);
            -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
            -webkit-transition-duration: 1s;
        }
        #masker2
        {
            position: absolute;
            background-color: #ffffff;
            width: 400px;
            height: 400px;
            -webkit-transform-origin: 50px 18px;
            -webkit-transform: translate(15px, 0px) rotate(34deg);
            -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
            -webkit-transition-duration: 1s;
        }

        #all:hover #page2
        {
            -webkit-transform-origin: 200px 100px;
            -webkit-transform: translate(0px, 0px) rotate(0deg);
        }
        #all:hover #masker2
        {
            -webkit-transform-origin: 200px 150px;
            -webkit-transform: translate(200px, 0px) rotate(0deg);
        }

        #masker3
        {
            position: absolute;
            background-color: #ffffff;
            width: 400px;
            height: 400px;
            -webkit-transform-origin: -50px 0px;
            -webkit-transform: translate(380px, 0px) rotate(-32deg);
            -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
            -webkit-transition-duration: 1s;
            z-index: 4;
            overflow: hidden;
        }
        
        #page3
        {
            position: absolute;
            background-color: #ff9933;    
            width: 200px;
            height: 200px;
            z-index: 4;
            -webkit-transform-origin: 0px 0px;
            -webkit-transform: translate(-160px, -70px) rotate(32deg);
            -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
            -webkit-transition-duration: 1s;
        }
        
        #all:hover #page3
        {
            -webkit-transform-origin: 90px 0px;
            -webkit-transform: translate(0px, 50px) rotate(0deg);
        }
        #all:hover #masker3
        {
            -webkit-transform-origin: 200px 100px;
            -webkit-transform: translate(200px, -50px) rotate(0deg);
        }
    </style>
</head>
<body>

    <div id="pageflip">
        <div id="all">
            <div id="page1">
                <div>Page1</div>
            </div>
        
            <div id="page2">
                <div id="masker2"></div>
                <div>Page2</div>
            </div>
            <div id="masker3">
                <div id="page3">
                    <div>Page3</div>
                </div>
            </div>
        </div>
    <div>

</body>
</html>

其實一切都要回到三角函數,但是實在是太麻煩了(疑),所以只好留給高人處理吧(逃)。