CODEWITHSUNDEEP
htmlcssrotationcss-transitions
Maëlle
Maëlle

Reputation: 653

CSS rotation not centered

So I've got this circle that is rotating on hover but it's not centered and I don't know why (I did add the 'transform-origin:center center') And also, sorry I know very very little about css but what does it do/mean when there's two consecutive selectors pls?

Here's my code:

#welcome:hover #welcomeavatar{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;  
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
transform-origin : center center;
}

#welcome #welcomeavatar{
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  transform-origin : center center;
}
 
#welcome:hover #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-left:120px;
}


#welcome #speechbubble{
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#welcome #speechbubble{
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
<div id="welcome">
<div id="welcomeavatar"><img src="http://www.for-example.org/img/main/forexamplelogo.png"></div>
<div id="speechbubble"></div>

The snippet isn't showing what's really happening but it's just so you can have my code and here's the real result : www.typhotoshop.tumblr.com

Thank you for taking the time!

Upvotes: 3

Views: 11422

Answers (2)

EricL
EricL

Reputation: 959

Apparently I don't know how to Stack Overflow. My original comment as an actual answer:

It's off center because the element you are rotating (#welcomeavatar) is display:block which takes up the full width of its container. Making it display inline-block is less than ideal because it can insert unwanted whitespace.

You should give #welcomeavatar a width and a height of 200px (the same as your image). Then you need to add some styles to your image as well to get rid of the wobble. Make your image display:block and add a height/width of 200px as well.

Upvotes: 1

dmoz
dmoz

Reputation: 1265

The rotation is actually around the center, but the div you're applying the rotation to is larger than your image. See screenshot below:

You'll want to make sure the div you're rotating is exactly the same size as the image inside(ie. remove width/height from that div altogether or add width/height that is the same as the image).

Also, the margin-left on the #speechbubble increases on the hover as well, so again, the rotating div moves left. Make that margin the same on hover and no-hover and it won't move.

Hope that helps.

Upvotes: 6

Related Questions