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>

效果就出来了～