CSS 圖片旋轉功能，減少art出圖

Hsu Steven — Sun, 02 Feb 2020 05:01:14 +0000

有些前端工程師很喜歡叫art出圖，連旋轉其實都是可以用css做到，

但卻懶到什麼都叫art來做，造成art很討厭工程師 XDDD !

CSS的 transform 屬性可以讓網頁元素變形，呈現多種的特殊效果，其中之一便是旋轉效果，可以自由設定元素順時針或逆時針旋轉幾度。

寫法為rotate(θ)

指定元素以參考點為中心軸旋轉θ度。

θ 參數須有標示單位，例如： deg (角度)、rad (弧度) 、grad (梯度)

正數為順時針旋轉，負數反之為逆時針。

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

The post CSS 圖片旋轉功能，減少art出圖 first appeared on SDT 攻城獅區.

transform | SDT 攻城獅區

CSS 圖片旋轉功能，減少art出圖