HTMLayout設計UI基礎篇:旋轉角度的應用技巧
在進行元素布局時,有時候需要對同一個元素顯示不同的角度。這時候,我們就需要使用旋轉操作,也就是今天要講解的rotate的應用技巧。最終效果首先,我們來看一下今天要實現(xiàn)的效果——文字橫版和文字豎版(如下
在進行元素布局時,有時候需要對同一個元素顯示不同的角度。這時候,我們就需要使用旋轉操作,也就是今天要講解的rotate的應用技巧。
最終效果
首先,我們來看一下今天要實現(xiàn)的效果——文字橫版和文字豎版(如下圖所示)。
相同點和不同點
接著,我們可以仔細觀察一下這兩個按鈕的相同點和不同點。實際上,它們只是一個效果,不同之處只是進行了90度的旋轉操作。因此,我們只需要做一個顯示效果即可。
實現(xiàn)步驟
然后,我們來看一下第一個效果是如何實現(xiàn)的。實際上,有兩種方式可以實現(xiàn):
1. 直接將其制作成圖片;
2. 在Sciter中使用自帶的字體,如下圖所示:
加入代碼
如果想要使用自帶的字體實現(xiàn)你想要的效果,只需要添加以下代碼即可:
```
```
加入這個代碼后,就可以直接顯示出效果了。
旋轉角度
接下來,我們來看一下如何使用旋轉操作實現(xiàn)下一個效果。只需要對元素進行角度旋轉即可。例如,如果要右旋轉90度,則可以使用以下代碼:
```
```
這樣,我們就可以實現(xiàn)想要的效果了。