Question

我只是对圆形div进行简单缩放，请参阅fiddle。

它适用于Chrome和Safari，但在Firefox中，圆形div的一部分会在转换过程中被裁剪，并在此之后恢复正常。

可以修复：

在父级上具有非透明背景。
没有父母的overflow: hidden。
没有父母的轮换。

但是我无法将此修复程序用于我正在制作here。

所有这些东西都可以在Chrome和Safari中使用，所以如果有人知道为什么firefox会像这样，我很高兴知道。

由于

这是css：

 .petale-wrapper
  {
    width: 200px;
    height: 100px;
    position: relative;
    transform: rotate(-20deg);
    overflow: hidden;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
  }

  .petale
  {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 150px;
    height: 75px;
    border-radius: 75px 75px 0 0;
    background-color: cyan;
    transition: transform 0.5s;
    -webit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    transform: scale(1) rotate(60deg);
    -webkit-transform: scale(1) rotate(60deg);
    -moz-transform: scale(1) rotate(60deg);

  }

  .petale:hover
  {
     transform: scale(1.2) rotate(60deg);
     -webkit-transform: scale(1.2) rotate(60deg);
    -moz-transform: scale(1.2) rotate(60deg);
  }

这是html：

      <div class="petale-wrapper">
       <div class="petale">

       </div>
      </div>

firefox舍入div被转换为溢出隐藏到父级的转换

0 个答案: