问题CSS3规模变换和溢出:隐藏在Safari上

Question

我在Safari上有缩放变换效果和溢出的问题.当我在div内容上使用此效果时,溢出不适用于圆形容器.

我的代码:

  .container{
    width:100px;
    height:100px;
    border-radius: 50%;
    background:none;
    z-index:100;

    box-shadow: 
    inset 0 0 0 6px rgba(255,255,255,0.6),
    0 1px 2px rgba(0,0,0,0.1);
    overflow:hidden;

    -webkit-transition:all .9s ease-in-out; // Chrome Safari
           -moz-transition:all.9s ease-in-out;       // Mozilla
             -o-transition:all.9s ease-in-out;           // Opéra
            -ms-transition:all .9s ease-in-out;         // IE
                transition:all.9s ease-in-out;              
    }

   .container:hover .scaler
     {
    -webkit-transform: rotate(380deg) scale(11);
       -moz-transform: rotate(380deg) scale(11);
         -o-transform: rotate(380deg) scale(11);
            transform: rotate(380deg) scale(11);

              filter: alpha(opacity=0);
              opacity: 0;       
            width:100px;
            height:100px;
            border-radius: 50%;
       }

  .scaler{ 
    width:100px;
    height:100px;
    font-size:36px;
    border-radius: 50%;
    z-index:-999;
    line-height:100px;
    vertical-align:middle;
    text-align:center;
    background:#0066FF;
    color:#CCCCCC;

    -webkit-transition:all .4s; // Chrome Safari
           -moz-transition:all .4s;       // Mozilla
             -o-transition:all .4s;           // Opéra
            -ms-transition:all .4s;         // IE
                transition:all .4s;
    }

<div class="container">
<div class="scaler">HI</div>
</div>

非常感谢你!!

(对不起,我的英语不好)

Answer 1

如果-webkit-mask-image在.container类上包含径向渐变,则会创建一个遮罩,以防止子元素的内容显示在父元素的边界之外.这很像图形应用程序中使用的图层蒙版.

-webkit-mask-image: -webkit-radial-gradient(white, black);

Answer 2

我使用 Clip-path 来克服这个问题，因为它完全符合您的期望：剪辑它定义的区域之外的任何内容。如果您使用 content-box 作为值，它将保留您的 border-radius：

.container
{
    clip-path: content-box;
}

以下是关于使用 Clip-Path 可以实现的功能的更详细的细分。

编辑：删除了对 -webkit 前缀的引用，因为这不是必需的。另外，内容框值仅在 Safari 中有效，但无论如何，这是我看到原始问题的唯一浏览器。