2014-11-08 202 views
2

我遇到了CSS3旋轉問題。在圖像上,您可以看到懸停時需要動畫的SVG對象。左邊的對象是一個開始狀態,右邊的對象是我必須完成的一個例子。CSS3旋轉問題

我已經試過這一點:

.svg-pokazivac { 
    transition: .2s all ease-in-out; 
} 
.svg-pokazivac:hover { 
    transform: rotate(45deg); 
    transform-origin: center center; 
} 

但無論我做什麼,並且變換出身讓我選擇,我總是以某種方式放錯了地方,並翻譯成一些奇怪的位置的對象。到目前爲止,我所得到的最接近的解決方法是使用如下代碼:

.svg-pokazivac:hover { 
    transform: translate(350px,-150px) rotate(45deg); 
} 

但是動畫效果非常有趣。我做錯了什麼?

Objects

+0

您能否提供足夠的代碼來複制問題或提供實時演示?我的猜測是你沒有考慮到箭頭部分 – 2014-11-08 15:33:50

+0

當然,這裏是完整的場景:http://jsfiddle.net/3c7zf4uq/ – 2014-11-08 16:09:40

+0

那個小提琴沒有旋轉動畫(至少在Chrome上) – 2014-11-08 17:08:33

回答

0

幾杯咖啡後,我終於設法做到了。我所做的就是從SVG元素徹底刪除指針,圓和改造他們在一個純CSS:

.svg-pointer { 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 0 45.5px 46px 45.5px; 
    border-color: transparent transparent #4e4e4e transparent; 
    position: absolute; 
    top: 125px; 
    left: 306px; 
    transform-origin: 50% 227px; 
} 

.svg-circle { 
    width: 379px; 
    height: 379px; 
    border-radius: 999px; 
    background: #4e4e4e; 
    position: absolute; 
    top: 161px; 
    left: 159px; 
} 

剩下的只是一個JavaScript過渡操作。在這裏可以看到整個解決方案: http://jsfiddle.net/3c7zf4uq/7/

同時,我想指出這非常有幫助的物品,其對我幫助很大:http://demosthenes.info/blog/860/Animating-Elements-In-Arcs-Circles-and-Ellipses-With-CSS

我希望這會幫助別人有類似問題的:)

1

你所得到的怪異行爲,因爲過渡:所有造成兩個不同的變換起源之間的過渡 - 默認和你明確指定一個。現在,CSS轉換原點的默認默認值應該是50%50% - 所以這應該不是問題,但顯然Chrome認爲SVG形狀的默認默認值是0%0%的SVG轉換的默認值。 。 [可能的錯誤!]如果你添加一個轉換原點到你的基類,它的工作就好了。

.svg-pokazivac { 
    transition: .2s all ease-in-out; 
     transform-origin: 347px 347px; 
} 
.svg-pokazivac:hover { 
    transform: rotate(1805deg); 
    transform-origin: 347px 347px; 
} 

請注意,變換原點的50%50%不太有效,因爲指針正被包含在中心的計算中。此外,你可能會認爲你可以通過從轉換全部切換到轉換轉換(不包括轉換原點)來解決此問題,但這不起作用。只有在基類中指定轉換原點才能實現。

+0

感謝您的詳細解釋。 – 2014-11-09 15:30:45