Kendo UI Mobile 中的旋转、翻转和调整图标大小答案

【问题标题】：Rotate, Flip and Resize icons in Kendo UI MobileKendo UI Mobile 中的旋转、翻转和调整图标大小
【发布时间】：2014-05-11 12:55:57
【问题描述】：

是否可以在 kendo-ui mobile 中轻松旋转（90-180-270 度）、翻转（水平/垂直）和调整（2x、3x）图标？

【问题讨论】：

标签： icons kendo-mobile

【解决方案1】：

您可以使用 CSS 变换轻松进行旋转，如下所示：

<style>
    .km-home:after {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
</style>

您也可以使用 CSS 变换翻转元素：

<style>
    .km-home:after {
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }
</style>

您也可以使用缩放来调整它的大小 - scale(2) 等...

然而这个问题与剑道 UI 无关 :)

【讨论】：

非常感谢。我希望 html 端有一些命令，比如 data-icon-size= 。但这也很容易。再次感谢
transform: scaleX(-1) 是最好的解决方案，因为 rotate(180deg) 可能会产生不希望的结果，因为 .km-icon:before 和 .km-icon:after 伪-元素通常以不随图标的视觉中心点旋转的方式定位。

【解决方案2】：

以下是基于 Bundyo 的见解使用自定义剑道移动图标实现上一个和下一个按钮的示例：

<a data-role="button" class="prev" data-icon="custom"></a>
<a data-role="button" class="next" data-icon="custom"></a>

CSS：

.km-button.prev .km-icon.km-custom:before, .km-button.prev .km-icon.km-custom:after, 
.km-button.next .km-icon.km-custom:before, .km-button.next .km-icon.km-custom:after { content: "\e217" }
.km-button.prev .km-icon.km-custom:before, .km-button.prev .km-icon.km-custom:after { -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); }

【讨论】：