Rotating a shadow on social icons hover state - css

Question

I've just started to work on a pure css set of social icons. Everything is going pretty smooth but I can't get this half circle shadow to rotate correctly.
The transition seems to be working correctly but the positioning of the shadow is not correct. It may be due to the axis point it is rotating on but it seems to be correct. Without any transition I can get the shadow aligned correctly with,
top: 7px;
right: 15px;
but the shadow's parent is positioned relative and should keep the shadow inside of it without problems. I also tried top, left 5px since there is a 5px border on it but this also did not work.
Here is the css for the shadow:
.shadow {
height: 45px;
width: 100%;
overflow: hidden;
position: absolute;
top: 7px;
right: 15px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
}
.shadow:before {
content: "";
width: 90px;
height: 90px;
position: absolute;
display: block;
border-radius: 50%;
background: rgba(0, 0, 0, 0.1);
}
.icon:hover .shadow {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
bottom: 7px;
left: 15px;
}
My Test Runs
Shadow without top, left, right, and bottom used: Demo
Full set of icons with top, left, right, and bottom used: Demo
With the use of transform-origin: Demo
I do know why, on the full set of icons, it is transitioning so poorly but I am unsure of how to align this shadow correctly. Any ideas on how I can get this shadow to rotate inside of the icon correctly?

Answer 1

You are fixing with margins what you should fix with transform origin
CSS
.shadow {
height: 45px;
width: 100%;
overflow: hidden;
position: absolute;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-webkit-transform-origin: center bottom;
-moz-transform-origin: center bottom;
transform-origin: center bottom;
}
.icon:hover .shadow {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
fiddle
I have removed left and top, and added transform origin. This must be at the bottom because you have only half a circle, and so the circle center is at the bottom.

Answer 2

Nice icons! You were very close. You just needed the hover margin to adjust from the same side.
http://jsfiddle.net/SVHny/7/
.icon:hover .shadow {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
bottom: 7px;
right: -15px;
}