<div class="container">
<div class="row">
<h3>Animate gluphicon :</h3>
<button class="btn btn-default"><i class="glyphicon glyphicon-repeat gly-spin"></i></button>
<button class="btn btn-default"><i class="glyphicon glyphicon-cog gly-spin"></i></button>
<button class="btn btn-default"><i class="glyphicon glyphicon-th-large gly-spin"></i></button>
<button class="btn btn-default"><i class="glyphicon glyphicon-refresh gly-spin"></i></button>
<h3>Rotate gluphicon :</h3>
<button class="btn btn-default"><i class="glyphicon glyphicon-leaf"></i> normal</button>
<button class="btn btn-default"><i class="glyphicon glyphicon-leaf gly-rotate-90"></i> gly-rotate-90</button>
<button class="btn btn-default"><i class="glyphicon glyphicon-leaf gly-rotate-180"></i> gly-rotate-180</button>
<button class="btn btn-default"><i class="glyphicon glyphicon-leaf gly-rotate-270"></i> gly-rotate-270</button>
<h3>Flip gluphicon :</h3>
<button class="btn btn-default"><i class="glyphicon glyphicon-leaf gly-flip-horizontal"></i> gly-flip-horizontal</button>
<button class="btn btn-default"><i class="glyphicon glyphicon-leaf gly-flip-vertical"></i> gly-flip-vertical</button>
</div>
</div>
.gly-spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
.gly-rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.gly-rotate-180 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.gly-rotate-270 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.gly-flip-horizontal {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.gly-flip-vertical {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-ms-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
}
