網頁設計那個酷酷的跑馬燈

 緣起:

    話說，這篇文章距離上個文章有超過一個月的間隔了，我有夠廢的，其實，在這段時間裡，有一些可以記的東西沒記到，像是網頁設計的番路旅行，只因旅行後回來很累，才沒有花時間寫下來，有夠可惜的。

悔恨

    我們這禮拜三的網頁設計，老師在教CSS，教到關於變形跟動畫的部份，有些複雜，好多東西要記，啊我是想說，我需要用到的時候再去看就好了，所以，不是那麼專心在聽課。

(自婊中)

    不過，老師講到最後，秀了一個很酷的東東，類似跑馬燈的東西，不過它是 3D 的，還能用 range 來調速度，有夠酷的，我也想試試，剛好，blogger 有支援能直接以 html 模式編輯文章，我可以直接把程式放在上面。

那個酷酷的東西

原理:

    那個跑馬燈的部份，不需要寫什麼程式，都是用 CSS去實現的，聽完老師的解釋，我是這麼理解的。

來個 div 標籤

把一些相同圖片放入 div 裡

把裡面的圖片以 css 排成 3D 的環狀

以Z軸為準去轉動，就會有那個效果了

CSS設定:

    我在看了老師給的 html 檔後，發現了一些重點。

主要的html部份

    standpoint 的 css 要設定 perspective ，platform 的 css 要設定 transform-style。

    再來是 img 的部份

    我們要設定 transform 的 rotateY 跟 translateZ。

    然後是動畫的部份。

    那些設定是什麼東西呢 ? 我沒有全部都很了解，一半一半吧，想知道的話可以 google ，反正我也不知道要怎麼講 (真的。

成果:

    話說，它怎麼會左右偏移啊 ?