- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
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);
}
sorry about the formatting, don’t know what went wrong…
Fixed the code formatting…
I believe that it’s the display:block property that makes the difference.
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