Zi 字媒體

之前有看到google將搜尋的頁面傾斜，這個功能透過CSS3的transform就可以達成 CSS3 2D transform特性可以旋轉、傾斜、放大縮小和移動元素，對網頁的視覺觀感上提供很大的幫助 使用方法： transform: transform-function; -webkit-transform: transform-function; /* Safari and Chrome */ -moz-transform: transform-function; /* Firefox */ -o-transform: transform-function; /* Opera */ -ms-transform:transform-function; /* IE9以上 */ 變形函式 transform-function： 函式裡的θ參數要有單位，有三種單位可以使用：deg (角度) 、 rad (弧度) 、 grad (梯度)。 1.rotate(θ)：以參考點為中心軸 2D 旋轉 θ 度。 2.skew(θx,θy)：以參考點為中心軸沿著橫向傾斜 θx 度、縱向傾斜 θy 度( 可以拆開成skewX(θ)和skewY(θ) ) 3.scale(x,y)：指定元素由參考點 2D 橫向縮放 x 倍、縱向縮放 y 倍( 可以拆開成scaleX(x)和scaleY(y)，此函式的參數不需要單位 ) 4.translate(x,y)：指定元素由參考點 2D 橫向移動 x 距離、縱向移動 y 距離( 可以拆開成translateX(x)和translateY(y)，此函式的參數單位為px ) 5.matrix(a,b,c,d,e,f)：指定元素由參考點依據數學變形矩陣 (transformation matrix) 的 6 個參數值產生 2D 變形( 此函式的參數為數字，不需要單位 ) Sample /* Safari and Chrome 網頁傾斜50度 */ -webkit-transform: rotate(50deg); Categories: CSS 分類 Android AngularJS API Blueprint Chrome Database MySQL DataStructure Docker Editor Vim Firefox Git GitLab Google API Hadoop Language Go Java JavaScript jQuery jQueryChart Node.js Vue PHP Laravel ZendFramework Python Mac Network Cisco DLink Juniper Oauth Server Apache Share Unix FreeBSD Linux WebDesign Bootstrap CSS HTML Wordpress Search 搜尋關鍵字: