CSS Bootstrap 中的旋转字形/字体真棒
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18604829/
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
Rotating Glyphicons / Font Awesome in Bootstrap
提问by Tim McClure
I'm trying to get the glyphicons in my bootstrap site to rotate on hover (in addition to changing color).
我试图让我的引导站点中的字形在悬停时旋转（除了改变颜色）。
Here's my attempt: http://jsfiddle.net/young_greedo17/88g5P/
这是我的尝试：http: //jsfiddle.net/young_greedo17/88g5P/
...which uses this code:
...使用此代码：
<div class="widgetbox">
<br><br>
<div class="icon-calendar icon-large"></div>
<h5>Add an event</h5>
</div>
... here's the CSS:
...这是CSS：
.widgetbox {
width: 250px;
height: 250px;
background-color: black;
color: white;
text-align: center;
}
.widgetbox [class*="icon-"] {
-webkit-transition-duration: 1.0s;
-moz-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
transition-duration: 1.0s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.widgetbox:hover [class*="icon-"] {
color: #24a159 !important;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
Here's an example of what I'm looking to happen on hover (see four column widget box ATF): http://themeforest.net/item/flatnica-ultimate-flat-template/full_screen_preview/5343665
这是我希望在悬停时发生的示例（请参阅四列小部件框 ATF）：http: //themeforest.net/item/flatnica-ultimate-flat-template/full_screen_preview/5343665
Obviously, the color changes, but even that doesn't change in accordance with the parameters I'm setting for the transition in the CSS.
显然，颜色会发生变化，但即使如此也不会根据我为 CSS 中的过渡设置的参数而改变。
Thanks!
谢谢！
采纳答案by adrift
The problem is that you're trying to transform an inlineelement - this isn't possible.
问题是您正在尝试转换inline元素 - 这是不可能的。
You'll need to changethe display value of the glyphicon to inline block.
Here are the details from the CSS Transforms Module:
以下是CSS 转换模块的详细信息：
transformable element
可变形元素
A transformable element is an element in one of these categories:
可变形元素是属于以下类别之一的元素：
an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]
an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform [SVG11]`
一个元素，其布局由 CSS 框模型控制，该模型是块级或原子内联级元素，或者其显示属性计算为 table-row、table-row-group、table-header-group、table-footer -group、table-cell 或 table-caption [CSS21]
SVG 命名空间中的一个元素，不受 CSS 盒模型控制，它具有属性 transform、'patternTransform' 或 gradientTransform [SVG11]`
回答by drpawelo
New Font awesome introduced rotatenotation http://fontawesome.io/examples/
新字体真棒引入了旋转符号http://fontawesome.io/examples/
//Normal:
<i class="fa fa-shield"></i> normal<br>
//Rotated:
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
//Flipped
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
回答by djiango
The font-awesome.cssfile sets display: inlinefor your selector: [class^="icon-"],
[class*="icon-"]. You can see this at line 161 of the CSS file:
为您的选择器font-awesome.css设置的文件display: inline：[class^="icon-"],
[class*="icon-"]. 您可以在 CSS 文件的第 161 行看到这一点：
[class^="icon-"],
[class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
}
Therefore you need to set the .widgetbox [class*="icon-"]to have a property display: block;http://jsfiddle.net/88g5P/6/
因此你需要设置.widgetbox [class*="icon-"]一个属性display: block;http://jsfiddle.net/88g5P/6/
EDIT: after looking up the differences between display:block;and display:inline-block;, I came upon this simple visual answer on Stack overflow. Based on this answer, it's probably better to use display:inline-block
编辑：在查找display:block;和之间的差异后display:inline-block;，我在 Stack overflow 上找到了这个简单的视觉答案。根据这个答案，最好使用display:inline-block
回答by jbr3zy
you need to override the icon's display setting, since the rotation won't work on inline elements
您需要覆盖图标的显示设置，因为旋转不适用于内联元素
.widgetbox [class*="icon-"] {
...
display:block;
}
回答by Timothy Walters
In your particular case the issue is that the icons you are using have display: inline-block, I added display:blockto the custom CSS and it now works.
在您的特定情况下，问题是您使用的图标具有display: inline-block，我添加display:block到自定义 CSS 中，现在可以使用了。
