问题 CSS3 缩放转换和溢出:隐藏在 Safari 上 [英] Probleme CSS3 scale transform and overflow:hidden on Safari

问题描述

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

这里是我的代码:

 .container{宽度:100px；高度:100px；边界半径:50%；背景:无；z-索引:100；框阴影:插入 0 0 0 6px rgba(255,255,255,0.6),0 1px 2px rgba(0,0,0,0.1);溢出:隐藏；-webkit-transition:所有 .9s 缓入缓出；//Chrome Safari-moz-transition:all.9s 缓入缓出；//Mozilla-o-transition:all.9s 缓入缓出；//歌剧院-ms-transition:所有 .9s 缓入缓出；//IE过渡:all.9s 缓入缓出；}.container:hover .scaler{-webkit-transform:旋转(380度)比例(11)；-moz-transform:旋转(380度)比例(11)；-o-变换:旋转(380度)比例(11)；变换:旋转(380度)比例(11)；过滤器:阿尔法(不透明度= 0)；不透明度:0；宽度:100px；高度:100px；边界半径:50%；}.标尺{宽度:100px；高度:100px；字体大小:36px；边界半径:50%；z-索引:-999；行高:100px；垂直对齐:中间；文字对齐:居中；背景:#0066FF;颜色:#CCCCCC；-webkit-transition:all .4s;//Chrome Safari-moz-transition:all .4s;//Mozilla-o-transition:all .4s;//歌剧院-ms-transition:all .4s;//IE过渡:所有 .4s；}<div class="容器"><div class="scaler">HI</div>

非常感谢！！

(抱歉我的英语不好)

解决方案

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

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

i have a problem with scale transforme effect and overflow on Safari. When i used this effect on a div content, the overflow not work on a rounded container.

here my code:

  .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>

thank you very much!!

(sorry for my bad english)

解决方案

If you include -webkit-mask-image with a radial gradient on the .container class, this will create a mask which will prevent the content of the child element being shown outside the bounds of the parent. This is much like a layer mask used in a graphics application.

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

这篇关于问题 CSS3 缩放转换和溢出:隐藏在 Safari 上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！