旋轉社交圖標懸停狀態上的陰影

Question

我剛開始在純CSS社交圖標集上工作。一切都很順利，但我無法得到這個半圈陰影正確旋轉。

過渡似乎正常工作，但陰影的位置不正確。這可能是由於它正在旋轉的軸點，但它似乎是正確的。沒有任何過渡，我可以得到與正確對齊的影子，

top: 7px; 
right: 15px; 

但陰影的父母相對定位，並應使影子這裏面沒有問題。我也嘗試了頂部，左邊5px，因爲它有一個5px的邊框，但這也不起作用。

這裏是陰影的CSS：使用

.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; 
} 

---

我的測試運行

陰影沒有頂部，左側，右側和底部：Demo

全套使用頂部，左側，右側和底部的圖標：Demo

通過使用變換來源：Demo

我不知道爲什麼，在全套的圖標，它正在轉變如此之差，但我不確定如何正確對齊這個陰影。關於如何讓這個陰影在圖標內正確旋轉的任何想法？

Answer 1

您與利潤固定，你應該解決什麼用轉換原點

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

我已刪除左頂部，並補充轉化起源。這必須在底部，因爲你只有半個圓圈，所以圓心位於底部。

Answer 2

漂亮的圖標！你非常接近。您只需要懸停邊距從同一側進行調整。

http://jsfiddle.net/SVHny/7/

.icon:hover .shadow { 
    transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    bottom: 7px; 
    right: -15px; 
}