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%

原本的

旋轉後的

 

 

 

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *