transition

transition過度屬性 添加到需要過度的元素上
時間為必寫屬性 all默認值 ease由快到慢默認值 linear 勻速
delay 過度的延遲

2d平移

transform:translate
移位
只寫一個值，x軸位移，正值向右，負值向左
寫2個值，第1個是x軸位移，第2個是y軸，正值向下，負值向上
可以寫百分比，參考是盒子自身寬高
注意：2d轉換不脫標，還占據原來的位置

2d 旋轉

transform:rotate (360deg);
rotate（度數deg） 正值順時針 ，負值逆時針

2d縮放 ,

放大transform:scale(2)
2d轉換縮放，盒子里的所有內容都會跟著縮放，
只寫一個值，是等比例縮放 值>1放大 值<1縮放
注意:不推薦寫負值
寫2個值，第1個是水平縮放，第2個值是垂直縮放

修改元素的基準點transform-origin
1.寫2個方位值，left right center top bottom , 只寫一個，另外一個值默認center
2.寫數值， 第1個值是距左邊的距離，第2個值是距上邊的距離，可以為負值

2d 傾斜

transform:skew(45deg,20deg)
傾斜 第一個值是x軸，第2個是y軸

轉換連寫 注意連寫 一般位移在前邊
transform: 位移translate(500px) 旋轉rotate(360deg)縮放 scale(2);

3d平移與視距

視距，眼睛距屏幕距離，有了視距，才有透視，添加到父元素上perspective：800px；3d位移的連寫 translate3d(x軸，y軸，z軸) transform: translate3d(100px, 100px, 200px);

3d 旋轉

x軸正值從下往上，負值反方向

transform: rotateX(-60deg);
y軸正值從左向右旋轉 負值反方向
transform: rotateY(60deg);
z軸正值順時針，負值逆時針
transform: rotateZ(360deg);

transform 對行內元素無效

總結

以上是生活随笔為你收集整理的2d运用 - 3d 视距的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。