了解transform的3d效果之前，先了解一下座標和透視（perspective）
在了解透視之前，首先要先了解座標軸。3d變形與2d變形最大的不同就在於其參考的座標軸不同。2d變形的座標軸是平面的，只存在x軸和y軸，而3d變形的座標軸則是x、y、z三條軸組成的立體空間，x軸正向、y軸正向、z軸正向分別朝向右、下和螢幕外
transform有5個屬性值主要包括：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix;
其主要用法用於2d變形
translate --移動
樣式**:
.border
.border div
.box01,.box02,.box03,.box00
/* 移動 */
.box00:hover
.box-0:hover
.box01:hover
.box02:hover
.box03:hover
/* 旋轉 */
.box04:hover
.box05:hover
.box06:hover
.box07:hover
.box
.box08:hover
.box09:hover
.box10:hover
.box11:hover
.box12:hover
.box13:hover
translate(20px)
translate(0,40px)
translate(20px,40px)
translate3d(50,50,200)
translate3d(50,50,-200)
rotate --旋轉
x 軸旋轉60°
rotatex(60deg)
x 軸旋轉60°
rotatex(60deg)
y 軸旋轉60°
rotatey(60deg)
z 軸旋轉60°
rotatez(60deg)
3d旋轉60°
rotate3d(60deg)
縮放0.5倍
scale(0.5)
x 軸縮放0.5倍
scalex(0.5)
y 軸縮放0.5倍
scaley(0.5)
x軸，y軸同時縮放
scale(0.5,1.2)
3d縮放
scale3d(0.5,1.2,0.3)
3d縮放
UIView的transform屬性值詳解
uiview的transform屬性 1.transform返回的是乙個cgaffinetransform,它主要用來設定控制項的形變狀態 旋轉和形變 2.建立cgaffinetransform函式 cgaffinetransformmakescale cgfloat sx,cgfloat sy 建...
關於transform屬性導致字型模糊的問題
最近寫專案時也碰到了字型會模糊的情況，先簡單描述一下問題 乙個寬度固定但是高度auto的彈窗讓他在螢幕當中展示 不能使用flex屬性 position fixed top 50 left 50 transform translate 50 50 用了以上 讓彈窗居中，後來發現有的情況會使文字顯示的很...
transform屬性總結
用於向元素應用2d或3d轉換 我們可以用他對元素進行旋轉，縮放，移動，傾斜 transform的值 2d轉換translate x,y 3d轉換translate x,y,z translatex x 轉換x軸的值 translatey y 轉換y軸的值 3d轉換translatez z scale...