CSS3的形狀變換允許我們對元素拉伸、縮放等等
這篇我主要談下一2D平面變換
屬性trans form可以進行變換
transform是變形的意思
並且它主要透過函數來使用，有以下函數
.demo { ......
transform: translate(100px, 200px); <--
}（小寫形式translatex/y也可以）
.demo { ......
transform: translateX(100px) translateY(200px); /*改*/}結果是元素向右平移了100px，向下平移了200px
正數順時針旋轉，允許負值
.demo { ......
transform: rotate(30deg);}不過元素預設的旋轉中心是元素中心
修改變換中心可以用我們的transform-origin屬性
比如說我們想要讓元素沿著左上頂點旋轉
.demo { ......
transform: rotate(30deg); transform-origin: 0 0; /*增*/}預設的形式就是
transform- origin: 50% 50% 0; x-axis可選值除了長度和百分比，還有left、center、
right y-axis可選值除了長度和百分比，還有
top、center、bottom z-axis可選值只有長度值，在
2D變換中我們暫時用不到它
兩個參數，寬度與高度縮放的倍率（無單位）
同樣可以拆成scaleX()與scaleY()
.demo { ......
transform: scale(2,2);}注意這是真正意義的縮放
意思就是，如果你的元素中有文字會產生拉伸的效果
等價形式如下
.demo { ......
transform: scaleX(2) scaleY(3); /*改*/}這個函數會讓你的元素線性扭曲
兩個參數，x軸與y軸的扭曲角度，同樣是xxdeg的形式
.demo { ......
transform: skew(10deg,20deg);}.demo { ......
transform: skewX(10deg) skewY(20deg); /*改*/}真的是超級NB
矩陣變換用的比較少，它是上面所有變換的基礎
我懂得也不是很深
作為一個數學系的學生，確實慚愧T^T
matrix變換有6個參數，可以控制元素的旋轉、平移、傾斜和縮放
例如下面的程式碼把元素旋轉了30°，x、y軸各平移20px
.demo { ......
transform: matrix(0.866,0.5,-0.5,0.866,20,20);}沒準以後我心血來潮也寫一篇矩陣的文章…
3D變換相關屬性–>傳送門
以上是關於CSS3元素2D平面變換屬性transform的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
