菜单图标过渡不会在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的转换原点。