CSS transform: rotate

旋轉

transform: rotate(向右旋轉的角度deg)

範例

.rect
.rect
 width: 100px
 height: 100px
 border: solid 1px
 transform: rotate(30deg)

Display

原本的

 

旋轉後的

 

指定旋轉基點:transform-origin

  • 100%:以最右側不動,旋轉
  • 0%:以最左側不動,旋轉
  • default 50%:中心不動,旋轉
.bar
.bar
 width: 200px
 height: 3px
 background-color: #11c1a4
 transform: rotate(45deg)
 //左側為基點
 transform-origin: 0%

原本的

旋轉後的

 

 

 

 

 

 

 

 

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *