以前想把乙個物件定位在乙個父物件的中間時(如下圖所示)
以前可能使用的css為
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;/*需要計算比較麻煩*/
但是借用css3中的transform可以很方便的實現
top:50%;
left:50%;
transform:translate(-50% -50%);/*比較方便*/
可能有時需要結合translate3d使用,則直接在translate後面寫translate3d。
下例在居中的基礎上往上偏移50px
css樣式為
top:50%;
left:50%;
transform:translate(-50% -50%) translate3d(0px,-50px,0px);/*比較方便*/
css3中的變形(transform)
transform 字面上的意思就是 使改變外觀 改變形態 在css3中transform主要包括以下幾種 1.旋轉 rotate 2.傾斜 skew 3.縮放 scale 4.移動 translate 語法transform none transform rotate skew scale tra...
css3中的transform方法
transform屬性應用於元素的2d或3d轉換。這個屬性允許你將元素旋轉,縮放,移動,傾斜等。translate transform的乙個方法 通過 translate 方法,元素從其當前位置移動,根據給定的 left x 座標 和 top y 座標 位置引數 用法transform transl...
css3的transform中scale縮放詳解
下面我們從3個方面開始介紹 1 scale x,y 對元素進行縮放 x表示水平方向縮放的倍數 y表示垂直方向的縮放倍數 y是乙個可選引數,沒有設定的話,則表示x,y兩個方向的縮放倍數是一樣的。並以x為準。transform scale 2,2.5 2 scalex 元素只在x軸 水平方向 縮放元素。...