元素的2D變換

2021-08-21 08:33:59 字數 492 閱讀 3123

雖然2d3d變形用的不是很多,但今天既然學到了還是要記一下,筆記流部落格,不喜勿噴

transform:變形樣式

rotate表示旋轉變形,正值順時針,單位為deg

transform-origin,設定變形原點,預設為50% 50%

translate:平移變形,兩個引數分別是橫向偏移量和縱向偏移量

scale:縮放變形,兩個引數分別是橫向方大倍數和縱向放大倍數

多種變形效果可以共同使用但需要注意的是有先後順序

transform: translate(100px,00px) rotate(45deg);
此段**是先平移,再旋轉,和先旋轉再平移是不一樣的,因為旋轉之後x,y軸也會跟著旋轉,具體效果自測

注意:在transform裡使用定位時,各個方向的值如果是百分號,是相對於自身的百分比(一般情況是相對于父標籤的百分比)

前端2D變換

2d轉換是使元素改變形狀 尺寸和位置的一種效果 2d轉換包括 translate 位移 rotate 旋轉 scale 縮放 skew 傾斜 translate 位移 平移 translate 水平位移,垂直位移 eg 讓div水平居中 doctype html en utf 8 viewport ...

過渡與2D變換

transition 屬性是乙個簡寫屬性,用於設定四個過渡屬性 transition property 規定設定過渡效果的 css 屬性的名稱 all attr none transition duration 運動時間 transition delay 延遲時間 transition timing...

CSS3屬性(過渡,2D變換,3D變換,動畫)

在css3中,我們如果不使用js 或者flash動畫,想要實現元素從a狀態變成b狀態,並且中間的過程可以被觀察到,那麼可以使用過渡屬性 transitiont ease 由快到慢 預設值 linear 勻速運動 ease in 加速運動 ease out 減速運動 ease in out 先加速後減...