Вращающиеся глификоны / шрифт Ужасный в бутстрапе

17

Я пытаюсь заставить глификоны на моем загрузочном сайте вращаться при наведении (в дополнение к изменению цвета).

Вот моя попытка: Ссылка

... который использует этот код:

<div class="widgetbox">
    <br><br>
    <div class="icon-calendar icon-large"></div>
    <h5>Add an event</h5>
</div>

... вот 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);
}

Вот пример того, что я хочу видеть при наведении курсора (см. окно ATX с четырех столбцов): Ссылка

Очевидно, что цвет меняется, но даже это не изменяется в соответствии с параметрами, которые я устанавливаю для перехода в CSS.

Спасибо!

    
задан Tim McClure 04.09.2013 в 05:16
источник
  • попробуйте установить свойство -webkit-transition-property: to 'all' –  Code Uniquely 04.09.2013 в 05:29
  • +1 Хорошая идея. FYI, у вас есть тип-o, который не разбирается в SCSS. Измените последнюю строку из .rotate (360), чтобы преобразовать: вращать (360), а затем анализировать в scss-преобразователях. –  eduncan911 12.06.2014 в 04:41

5 ответов

17

Проблема в том, что вы пытаетесь преобразовать элемент inline - это невозможно.

Вы должны изменить отображаемое значение глификона для встроенного блока.

Ниже приведены детали из модуля трансформирования CSS :

преобразуемый элемент

  

Преобразуемый элемент является элементом в одной из этих категорий:

  • элемент, макет которого определяется моделью блока CSS, которая является либо блочным, либо атомарным элементом линейного уровня, либо свойство отображения которого вычисляется в таблице-таблице, таблице-строке-группе, заголовке таблицы -группа, таблица-footer-группа, таблица-таблица или заголовок таблицы [CSS21]

  • элемент в пространстве имен SVG и не управляется моделью окна CSS, которая имеет атрибуты transform, 'patternTransform' или gradientTransform [SVG11] '

ответ дан Adrift 04.09.2013 в 05:25
  • Все еще не поддерживается в сафари или опера (работает в текущей бета-версии Safari): css-tricks.com/... –  dc5 04.09.2013 в 05:50
  • У меня нет, но статья была обновлена ​​совсем недавно. Хотя я точно не знаю об опера. –  dc5 04.09.2013 в 05:54
18

Новый шрифт удивительный представлен rotate нотация Ссылка

//Normal:
<i class="fa fa-shield"></i>&nbsp; normal<br>

//Rotated:
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>

//Flipped
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical
    
ответ дан drpawelo 07.11.2013 в 15:24
2

Файл font-awesome.css устанавливает display: inline для вашего селектора: [class^="icon-"], [class*="icon-"] . Вы можете увидеть это в строке 161 файла CSS:

[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;
} 

Поэтому вам нужно установить .widgetbox [class*="icon-"] для свойства display: block; Ссылка

EDIT: после поиска различий между display:block; и display:inline-block; , я столкнулся с этим простой визуальный ответ на переполнение стека . Исходя из этого ответа, вероятно, лучше использовать display:inline-block

    
ответ дан djiango 04.09.2013 в 05:29
1

вам нужно переопределить настройку значка, так как вращение не будет работать на встроенных элементах

.widgetbox [class*="icon-"] {

     ...

     display:block;
}
    
ответ дан jbr3zy 04.09.2013 в 05:42
1

В вашем конкретном случае проблема заключается в том, что используемые вами значки имеют display: inline-block , я добавил display:block к пользовательскому CSS, и теперь он работает.

    
ответ дан Timothy Walters 04.09.2013 в 05:51