htmlayout设计ui 基础篇：[10]rotate的使用

1、第一，我们来看看，今天要做的效果,也就是最后的文字横版，和文字竖版（对齐功能的前面2个图显示）

2、第二，我们可以先仔细看下，这2个按钮有什么相同的地方可以了解到，2个按钮其实就是一个效果，不同的只是做了一个旋转90度的操作也就是说，我们只需要做一个显示效果就行了

3、第三，接下来，我们先来看下，第一个效果是怎么实现的

4、第四，有几种方式：1、你可以直接画成图片来实现2、现在sciter中提供了一种文字,如下图：fontawesome-webfont.ttf

5、第五，我们来看下，这个自带文字可以显示的图效果样式仔细看下，就会明白，可以用自带的字体实现你要的效果图

6、第六，这里就直接说如何加上的代码如下： <button><div .酆璁冻嘌flow-v>媪青怍牙<div style="height:12px;"><span .font>&nbsp;&fa-long-arrow-right;</span></div><div><span .font >&nbsp;&fa-align-left;</span></div></div></button>加上这个代码后，就直接显示：

7、第七，接下来就是下一个效果了，我们只需要用rotate做下角度旋转就可以了你可以了解到，需要右旋转90度就可以实现你要的效果了代码如下：<button style="transform:rotate(90deg);">......</button>效果就出来了～