htmlayout设计ui 基础篇:[10]rotate的使用
1、第一,我们来看看,今天要做的效果,也就是最后的文字横版,和文字竖版(对齐功能的前面2个图显示)
![htmlayout设计ui 基础篇:[10]rotate的使用](https://exp-picture.cdn.bcebos.com/b7b28f87031c99c086c2e132af2fa872951fed91.jpg)
4、第四,有几种方式:1、你可以直接画成图片来实现2、现在sciter中提供了一种文字,如下图:fontawesome-webfont.ttf
![htmlayout设计ui 基础篇:[10]rotate的使用](https://exp-picture.cdn.bcebos.com/fab31cb375d7997b86cadaecf9dade49600fd991.jpg)
![htmlayout设计ui 基础篇:[10]rotate的使用](https://exp-picture.cdn.bcebos.com/cd93a5665159854040140456b5a23a42a17ac491.jpg)
7、第七,接下来就是下一个效果了,我们只需要用rotate做下角度旋转就可以了你可以了解到,需要右旋转90度就可以实现你要的效果了代码如下:<button style="transform:rotate(90deg);">......</button>效果就出来了~
![htmlayout设计ui 基础篇:[10]rotate的使用](https://exp-picture.cdn.bcebos.com/a31e1214c27bd282d8b7a1f23cb1eef97ebd3696.jpg)