Question

您好我想转换我的css转换而不是别的。很难通过文字解释，所以请查看下面的代码：

HTML：

<section class="success">
    <ul>
       <li>
           <div class="circle-spin-wrapper">
               <img src="ellipse_sm_blue.png" >
           </div>
       </li>
    </ul>
</section>

CSS：

.circle-spin-wrapper {
    transition: all 1s ease;
}

.success li:hover .circle-spin-wrapper {
    transform:scale(1.25);
    position: relative;
    top: 95px;
}

正如你所看到的，我有一个div，当你将鼠标悬停在它上面时，它会缩小1.25。它也向下移动95 px，顶部：95px;

转换有效，但它会转换比例（1.25）和顶部：95px。

我想这样做过渡（转换：所有1s轻松;）仅适用于变换：scale（1.25）而非top：95px。

我知道它与＆＃34;所有＆＃34;有关。过渡css中的关键字，但我不知道用什么来替换它只针对转换。

我尝试更换＆＃34;所有＆＃34;用＆＃34;转换＆＃34; ＆＃34;规模＆＃34;它没有用。

有人有任何建议吗？

谢谢！

Answer 1

我尝试更换＆＃34;所有＆＃34;用＆＃34;转换＆＃34; ＆＃34;规模＆＃34;它没有用。

更换＆＃34;所有＆＃34;用＆＃34;转换＆＃34;正是你应该做的 - 这将导致转换仅应用于转换属性。调试为什么在没有看到其余代码的情况下它没有工作是很难的 - 你能设置一个快速的CodePen吗？

Answer 2

.circle-spin-wrapper {
  transition: transform 1s ease;
  -webkit-transition: -webkit-transform 1s ease;
}
.success li:hover .circle-spin-wrapper {
  transform: scale(1.25);
  position: relative;
  top: 95px;
}

<section class="success">
  <ul>
    <li>
      <div class="circle-spin-wrapper">
        <img src="test.jpg">
      </div>
    </li>
  </ul>
</section>

这应该有效。注意：“-webkit-transition：-webkit-transform 1s easy;”是野生动物园

Answer 3

.circle-spin-wrapper {
    transition: transform 1s ease;
}

但由于.circle-spin-wrapper没有设置宽度，所以它看起来很麻烦，因此它是页面的整个宽度，这意味着.circle-spin-wrapper变为页面宽度的125％，内部的图像移出页面。

解决方案？在.circle-spin-wrapper上设置宽度。

Answer 4

正如您所说，all使用transition而不是transform。它实际上正在工作！

也许它是您缺少的供应商前缀。尝试添加它。

.circle-spin-wrapper {
    transition: transform 1s ease;
}

.success li:hover .circle-spin-wrapper {
    transform:scale(1.25);
    position: relative;
    top: 95px;
}

<section class="success">
    <ul>
       <li>
           <div class="circle-spin-wrapper">
               <img src="http://placehold.it/50x50" >
           </div>
       </li>
      </ul>
</section>

只转换css中的转换？

4 个答案: