transform:2d轉換
1，移動：translate
transform:translate(x,y); //translate(x,y) 定義 2d 轉換。
translatex(x) //定義轉換，只是用 x 軸的值。
translatey(y) //定義轉換，只是用 y 軸的值。
transform:translate(x,y,z); // translate3d(x,y,z) 定義 3d 轉換。
translatez(z) 定義 3d 轉換，只是用 z 軸的值。
2，旋**rotate(360deg)； //deg為旋轉的角度；
配合transition過渡屬性用
transform:rotate(360deg)； //值可以為負值，代表逆時針旋轉；
rotate(angle) 定義 2d 旋轉，在引數中規定角度。
3，縮放:scale //正數放大，負數縮小，值可以為小數；
transform: scale(x,y); //x,y不跟單位，1就是一倍，倍數放大縮小；
scale(2) //整個放大兩倍；
4，transition:過度屬性 過度時間 曲線 延遲；
transition: height 1s,width 2s;
transition:all 1s; //all代表全部屬性；
5，transform-origin:旋轉中心點
transform-origin: left right bottom right center; //也可以是畫素px；
2D轉換及動畫效果
今日框架 今日重點 一 2d轉換 2d 轉換是改變標籤在二維平面上的位置和形狀 1 translate 移動 1 語法 transform translate x,y 2 重點知識點 1 2d 的移動主要是指 水平 垂直方向上的移動 2 translate 最大的優點就是不影響其他元素的位置 3 t...
transform基本轉換應用2D
最近在折騰transform，其實不想寫啥的，但看在忙活的一天多的份上就簡單寫一下額。ps 只作為記錄，語言表達能力有限 transform常用的幾個值 translate 偏移 scale 縮放 skew 拉伸 傾斜 rotate 旋轉 ps 這幾個值都比較好理解，只要記得用到的座標軸y軸是向下的...
2D轉換及動畫
可以實現移動 旋轉 放縮效果的特徵 移動類似於定位，可以改變元素在頁面中的位置。語法 transform translate x,y 也可分開寫 transform translatex n transform translatey n 特點 旋轉是指讓元素在二維平面上順時針或逆時針旋轉 語法 tr...