菜單圖標過渡不會在Firefox中工作

Question

我在codepen上發現了這個動畫。 但以任何理由，這將不會在Firefox

工作

您可以在這裏看到的動畫： http://codepen.io/awesomephant/pen/zxBKBe

CSS：

rect { 
    fill: red; 
    transition: 300ms; 
    transform-origin: center; 
    border-radius: 3px; 
} 

svg { 
    overflow: visible; 
    width: 100px; 
    height: 50px; 
} 

.toast { 
} 

.boom { 
    rect { 
    fill: black; 
    } 

    .cheese { 
    transform: translateY(25px) rotate(45deg); 
    } 

    .toast { 
    transform: translateY(-25px) rotate(-45deg); 
    } 
} 

Answer 1

因此，這應該在Chrome和Firefox瀏覽器： http://codepen.io/anon/pen/KpBjPJ

div { 
padding: 10%; 
} 

rect { 
fill: red; 
transition: 300ms; 
border-radius: 3px; 
} 

svg { 
overflow: visible; 
width: 100px; 
height: 50px; 
} 

.toast { 
} 

.boom { 
    rect { 
    fill: black; 
    } 

    .cheese { 
    transform: rotate(45deg); 
    } 

    .toast { 
    transform: translateX(-40px) translateY(35px) rotate(-45deg); 
    } 
} 

我認爲問題在於事實上Firefox不支持SVG的轉換原點。