变换比例和边界半径答案

【问题标题】：Transform scale and border radius变换比例和边界半径
【发布时间】：2017-01-19 01:33:50
【问题描述】：

我尝试为图像添加悬停效果，但遇到了问题。

在 Firefox 中一切正常：

但在 Chrome 中是个问题：

这是我的代码：

<div class="photo">
   <img src="images/photo.jpg" alt="">
</div>



.photo {
   width: 200px;
   height: 200px;
   border: 10px solid $white-color;
   overflow: hidden;
   position: absolute;
   bottom: -50px;
   left: calc(50% - 110px);
   @include border-radius(50%);

   img {
     max-width: 100%;
     height: auto;
     @include scale(1);
     @include transition(.3s ease-in-out);

     &:hover {
       @include scale(1.2);
     }
   }
}

【问题讨论】：

看到你的@includes 会有帮助。

标签： css google-chrome transform scale

【解决方案1】：

Chrome 使用前缀对于这个特定用途 -webkit-transform: scale();

也将其添加到过渡属性中

为将来阅读 List of CSS vendor prefixes?

【讨论】：

这是我的混音器：// Generic transform @mixin transform($transforms) { -moz-transform: $transforms; -o-transform: $transforms; -ms-transform: $transforms; -webkit-transform: $transforms; transform: $transforms; } // Scale @mixin scale($scale) { @include transform(scale($scale)); } // Transition @mixin transition($transition...) { -moz-transition: $transition; -o-transition: $transition; -webkit-transition: $transition; transition: $transition; }
我有-webkit-transform和-webkit-transition:
您为 tansform 添加了前缀，为转换添加了前缀，但没有用于转换比例检查是否有效codepen.io/malikowy/pen/VPPyyq 首先在 Atom 中对其进行格式化以便于阅读版本，然后使用 Prepros 保存以检查错误，我从 scale mixin 中删除 @include

【解决方案2】：

    <style>
        .photo{
            width: 200px;
            height: 200px;
            border: 10px solid #fff;
            overflow: hidden;
            position: absolute;
            border-radius: 50%;
        }

        .photo img {
            max-width: 100%;
            height: auto;
            transition(.3 s ease-in-out);
        }

        .photo img:hover {
            transform: scale(1.2);
         }


    </style>

<div class="photo">
    <img src="images/photo.jpg" alt="">
</div>

【讨论】：