[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>

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

IE 退散！往後面站，往後面站，往後面站...

You might also like...