CSS3旋轉問題

我遇到了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

來源

2014-11-08 Igor Hrcek

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

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

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

幾杯咖啡後，我終於設法做到了。我所做的就是從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

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

來源

2014-11-11 19:13:29

你所得到的怪異行爲，因爲過渡：所有造成兩個不同的變換起源之間的過渡 - 默認和你明確指定一個。現在，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％不太有效，因爲指針正被包含在中心的計算中。此外，你可能會認爲你可以通過從轉換全部切換到轉換轉換（不包括轉換原點）來解決此問題，但這不起作用。只有在基類中指定轉換原點才能實現。

來源

2014-11-09 05:31:47

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

回答

相關問題