這幾天一直在研究手機中的菜單的彈出效果,這么在CSS3中發現了幾個屬性,當然這幾個屬性也可以實現更多的效果,可以另網頁絢麗起來,不過還得先記錄下來,以后可以更好的翻閱查找,就當是一個筆記吧!

translate:移動,transform的一個方法

国产视频app通過 translate() 方法,元素從其當前位置移動,根據給定的 left(x 坐標) 和 top(y 坐標) 位置參數:

用法

transform: translate(50px, 100px);
-ms-transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
-o-transform: translate(50px,100px);
-moz-transform: translate(50px,100px);

transform:變形。改變

国产视频appCSS3中主要包括 旋轉:rotate() 順時針旋轉給定的角度,允許負值 rotate(30deg)

国产视频app扭曲:skew() 元素翻轉給定的角度,根據給定的水平線(X 軸)和垂直線(Y 軸)參數:skew(30deg,20deg)

縮放:scale() 放大或縮小,根據給定的寬度(X 軸)和高度(Y 軸)參數: scale(2,4)

国产视频app移動:translate() 平移,傳進 x,y值,代表沿x軸和y軸平移的距離

国产视频app所有的2D轉換方法組合在一起: matrix()  旋轉、縮放、移動以及傾斜元素

matrix(scale.x ,, , scale.y , translate.x, translate.y)      
改變起點位置 transform-origin: bottom left;
綜合起來使用:transform: 30deg 1.5 30deg 20deg 100px 200px;

transition: 允許CSS屬性值在一定的時間區間內平滑的過渡,

需要事件的觸發,例如單擊、獲取焦點、失去焦點等

transition:property duration timing-function delay;

property:CSS的屬性,例如:width height 為none時停止所有的運動,可以為transform

duration:持續時間

timing-function:ease等

delay:延遲

国产视频app注意:當property為all的時候所有動畫

国产视频app例如:transition:width 2s ease 0s;