CSS 3D轉換在Web開發中已成為一個熱點話題。教程、演示示例以及現實生活的中應用幾乎無處不在。儘管它只支持最新版本的WebKit引擎(比如Chrome和Safari),但CSS 3D帶來的超炫酷的技術依然令人無法阻擋。本文作者一直以來都在從事將2D轉換成3D方面的研究。也許你會因一些概念、術語等將兩者混淆,文中例舉的這幾款示例能幫你輕鬆解答困惑。對於CSS 3D愛好者來說,無疑是個不錯的選擇。
一起來看下本文為您推薦的8篇非常實用的CSS 3D轉換教程吧!
1. Adventures In the Third Dimension: CSS 3D Transforms
本文解釋了如何利用CSS3創建出不同功能應用,比如matrix3d,perspective,rotateX,rotateY,rotateZ,rotate3d,scaleX,scaleY,scaleZ,scale3d,translateX,translateY,translateZ,translate3d。這是一篇非常不錯的文章,幫助你了解每個基本功能的實現方式。
2. Understanding CSS 3D Transform
通過圖文並茂深入了解CSS 3D轉換過程。本教材分為兩大部分,其中第一部分解釋了每個功能的用途。
3. CSS 3D Matrix Transformation
本文是第2部分,如果你是一位cos,sin,matrix迷,那麼,此文絕對是您的菜。文中通過幻燈演示,讓您了解每一個屬性。
4. Getting you started for CSS 3D transform
本文由Mozilla開發者Derby提供。這個視頻是利用CSS3創建的3D動畫。
5. An attempt at Understanding CSS 3D Perspective
透視是個比較棘手的問題,為了清除混亂,本教材讓您從不同的角度了解透視。
6. Intro to CSS 3D Transforms
這篇由David Desandro提供的教程詳細描述了代碼演示案例,你會驚訝於其利用代碼創建出的驚人效果。
7. CSS 3D Transform Module
如果你想了解CSS 3D轉換更多功能,W3C是個不錯的網站。
8. 3D Transform tool
一款好的工具應當能夠讓你隨時查詢並獲得答案,而這款你值得擁有。
儘管CSS 3D轉換還未成熟,但開發者們卻熱衷於使用並且受到了大家的強烈追捧。
溫馨提示:您可以使用Modernizr來檢測瀏覽器是否支持。
英文出自:queness
本文為CSDN編譯整理,未經允許不得轉載。如需轉載請聯繫market@csdn.net。