javascript 旋转页面上的离子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30857268/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rotate an ionicon on the page
提问by El Dude
I want to display directions with an arrow and was thinking to use the standard ionic arrow for the direction. Can I rotate the up arrow into any direction somehow?
我想用箭头显示方向，并考虑使用标准离子箭头作为方向。我可以以某种方式将向上箭头旋转到任何方向吗？
ion-arrow-up-a
Here is an attempt from the comments below
这是下面评论的尝试
<i class="icon ion-arrow-up-a" rotate degrees="90"></i>
angular.module('app.customDirectives', []).directive('rotate', function() {
return {
link: function(scope, element, attrs) {
// watch the degrees attribute, and update the UI when it changes
scope.$watch(attrs.degrees, function(rotateDegrees) {
// console.log(rotateDegrees);
//transform the css to rotate based on the new rotateDegrees
element.css({
'-moz-transform': 'rotate(' + rotateDegrees + 'deg)',
'-webkit-transform': 'rotate(' + rotateDegrees + 'deg)',
'-o-transform': 'rotate(' + rotateDegrees + 'deg)',
'-ms-transform': 'rotate(' + rotateDegrees + 'deg)'
});
});
}
}
});
回答by sam pierce
Similar to above, this is how I did it...
与上面类似，这就是我所做的...
HTML:
HTML：
<i class="ion-arrow-up-c rotate-90">
CSS:
CSS：
.rotate-90 {
display: inline-block;
transform: rotate(90deg);
}
回答by Akil
For Ionic icons v1, v2 specifically, the rotate property works only with the display property set to "inline" or "inline-block", it might work with other variations of inline as well.
特别是对于 Ionic 图标 v1、v2，rotate 属性仅适用于设置为“inline”或“inline-block”的 display 属性，它也可能适用于 inline 的其他变体。
Then you can rotate them normally using CSS
然后你可以使用 CSS 正常旋转它们
transform: rotate(90deg);
回答by Shamil Yakupov
There is other variants of arrow:
箭头还有其他变体：
ion-arrow-up-a
ion-arrow-right-a
ion-arrow-down-a
ion-arrow-left-a
Or... As I know, ionic framework is HTML5 based, so you can use CSS styles.
或者...据我所知，ionic 框架是基于 HTML5 的，因此您可以使用 CSS 样式。
.style {
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
If you want dynamic rotation, you have to check this url.
如果你想要动态旋转，你必须检查这个 url。
回答by Peter
for some reason the <i>element has to own display: inline-blockcss style to rotate successfully:
出于某种原因，<i>元素必须拥有display: inline-blockcss 样式才能成功旋转：
controller code:
控制器代码：
$scope.angle = 90
HTML:
HTML：
<i class="ion-arrow-up-c" style="display: inline-block; transform: rotate({{angle}}deg);"></i>
