有些前端工程師很喜歡叫art出圖,連旋轉其實都是可以用css做到,
但卻懶到什麼都叫art來做,造成art很討厭工程師 XDDD !
CSS的 transform 屬性可以讓網頁元素變形,呈現多種的特殊效果,其中之一便是旋轉效果,可以自由設定元素順時針或逆時針旋轉幾度。
寫法為rotate(θ)
指定元素以參考點為中心軸旋轉θ度。
θ 參數須有標示單位,例如: deg (角度)、rad (弧度) 、grad (梯度)
正數為順時針旋轉,負數反之為逆時針。
1 2 3 4 5 6 7 8 9 10 11 |
div{ background:#4d4d4d; color:#fff; width:150px;height:30px;padding:15px; text-align:center; -moz-transform:rotate(5deg); -webkit-transform:rotate(5deg); -o-transform:rotate(5deg); -ms-transform:rotate(5deg); transform:rotate(5deg); } |
幾行簡單的程式碼就搞定,也可以不用讓art,還要開photoshop 調整角度,等等差一度又要再重新出圖。
Reference
https://www.webdesigns.com.tw/css_rotate.asp