移動Web利器transformjs入門

在過去的兩年，越來越多的同事、朋友和其他不認識的童鞋進行移動web開發的時候，都使用了transformjs，所有必要介紹一下，讓更多的人受益，提高程式設計效率，並享受程式設計樂趣。（當然transformjs不僅僅支援移動裝置，支援css3 3d transforms的瀏覽器都能正常使用transformjs）

官方**：

npm install css3transform

transform(domelement, [notperspective]);

方便吧！

transform(domelement);//or transform(domelement, true);

//set "translatex", "translatey", "translatez", "scalex", "scaley", "scalez", "rotatex", "rotatey", "rotatez", "skewx", "skewy", "originx", "originy", "originz" domelement.translatex = 100; domelement.scalex = 0.5; domelement.originx = 50; //get "translatex", "translatey", "translatez", "scalex", "scaley", "scalez", "rotatex", "rotatey", "rotatez", "skewx", "skewy", "originx", "originy", "originz" console.log(domelement.translatex )

看下面這張圖：

順序影響結果，不直觀。那麼為什麼會是這個結果？可以通過new webkitcssmatrix(transform_str)對比最終的matrix。

這也直接說明了矩陣不符合交換律。ab!=ba

zepto姿勢：

$("#some_element").animate(, 500, 'ease-out')

這裡還需要注意的是，zepto裡的順序也會影響結果。因為其最後也是拼成string賦給dom元素。

tween.js姿勢

var position = , target = document.getelementbyid('target'); new tween.tween(position) .to(, 2000) .delay(1000) .easing(tween.easing.elastic.inout) .onupdate(functionupdate() );

animate.css姿勢:

@keyframes pulse  50%  to  }

注意，是另乙個屬性transform-origin，而不是transform。但是如果需要運動transform-origin呢？這種設計是不是就廢了？有沒有需要運動origin的場景？這個在遊戲設計中是經常會使用的到，這個以後另外單獨開篇再說，事實就是，有場景是需要運動origin來達到某種效果。

基於上面種種不便，所以有了transformjs！

transformjs專注於css3 transform讀取和設定的乙個超輕量級js庫，大大提高了css3 transform的可程式設計性

transformjs高度抽象，不與任何時間、運動框架**，所以可以和任意時間、和運動框架輕鬆搭配使用

transformjs使用matrix3d為最終輸出給dom物件，硬體加速的同時，不失去可程式設計性

transformjs擁有超級易用的api，一分鐘輕鬆上手，二分鐘嵌入真實專案實戰

transformjs擴充套件了transform本身的能力，讓transform origin更加方便

Web開發利器推薦（二）

看到乙個很棒的系列，介紹了很多對web開發很有幫助的利器，解決了很多開發中遇到的繁瑣事，翻譯來分享一下 通過這些服務，乙個沒有html css知識的人，就能在55分鐘內搭建乙個跨瀏覽器的頁面。這是為網頁設計師準備的完美解決方案，已經有超過26 000人在使用webflow。只能免費建立兩個專案，想要...

Web滲透之Web利器合集 sqlmap使用手冊

os cmd sql shell 8.讀取伺服器指定檔案 9.更新 u指定注入點url r 指定檔案 dbs跑庫名 d指定資料庫 tables跑錶名 t指定表 columns跑字段 c指定字段 dump跑資料 敏感指令 count檢視資料量 cookie注入 cookie id 66 level 2...

移動端除錯利器之vconsole

說明 由於移動端專案在手機中除錯時不能使用chrome的控制台，而vconsole是對pc端console的改寫 使用方法 使用 npm 安裝 npm install vconsole使用webpack，然後js 中 import vconsole from vconsole dist vconso...