CSS3 缩放变换和溢出问题：在 Safari 上隐藏

我在 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>

非常感谢！！

（对不起，我的英语不好）

如果你包括-webkit-mask-image上有径向渐变.container类，这将创建一个掩码，防止子元素的内容显示在父元素的边界之外。这很像图形应用程序中使用的图层蒙版。

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