Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How To Get A Font Icon To Spin In CSS3?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #40323
    GAtkins
    Member

    Greetings,

    Consider this pen:

    http://codepen.io/GAtkins/pen/lvEuB

    How can I make that letter “A” spin on hover. The actual markup I am trying to make spin is commented out in this example because it uses an icon font to represent a magnifying glass.

    Thanks in advance for any help.

    Glenn

    #111989
    JoniGiuro
    Participant

    this works for me


    .whoweareicon {

    font-size: 100px;
    font-style: normal;
    color: darkgreen;
    position:relative;
    width:40px;
    display:block;
    }

    .whoweareicon:hover {
    color: #9F9;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;

    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
    }
    #111990
    JoniGiuro
    Participant

    sorry about the formatting, don’t know what went wrong…

    #111991
    Paulie_D
    Member

    Fixed the code formatting…

    I believe that it’s the display:block property that makes the difference.

    #111993
    GAtkins
    Member

    Thanks gents, (Paulie, I;m not sure if you’re a “gent” or not, apologies if not ;))

    I have updated the pen:

    http://codepen.io/GAtkins/pen/lvEuB

    The only difference in my working code and the pen is that I added to the pen:

    margin-left: auto;
    margin-right: auto;

    and changed my working code’s width to auto as well.

    The thing that I am trying to spin sits centered in multiple containing and horizontal divs.

    It all works.

    @Paulie – it seems to be mutually related to both display:block and the width attribute.

    Thanks again.

    Glenn

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.