无法在Firefox中设置变换原点[重复]

Question

我正在尝试使用 SVG 和 CSS3 创建动画，它在 Chrome 上运行良好，但在 Firefox 上无法运行 我尝试将 -moz- 前缀添加到 transform-origin: 但它不起作用

here 是我创建的现场样本

我添加的 CSS 规则是：

#aniBin {
  overflow: visible;
}
#Bin:hover #cap {
  transition-duration: 400ms;
  transform: rotate(-150deg);
  transform-origin:0% 90%;
  -moz-transform-origin:0% 90%;
}

Answer 1

如果使用百分比作为单位，Firefox 中的 SVG 目前不支持transform-origin。 尝试使用像素：

transform-origin:0 10px;