CSS:悬停和转换 [英] CSS :hover and transform

问题描述

我有这种情况:

HTML:

<div class="button"></div>

css:

.button { 
   position:absolute; 
   left:0; top:0; 
   transform: translateY(50px); 
}

.button:hover { 
   transform: scale(1.2); /* keep the original transform */
}

在悬停时是否有办法仅添加比例转换而不覆盖转换?

Is there a way on hover to add just scale transform and not overwrite the translate?

推荐答案

尝试如下: 演示

Try like this: Demo

CSS:

 .button {
    width:auto;
    background-color:red;
    color:#fff;
    transform: translateY(50px);
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}
.button:hover {
    background-color:blue;
    color:#fff;
    -webkit-transform: translateY(50px) scale(1.2);
    -moz-transform: translateY(50px) scale(1.2);
    -o-transform: translateY(50px) scale(1.2);
    -ms-transform: translateY(50px) scale(1.2);
    transform: translateY(50px) scale(1.2);
}

HTML:

<button class="button">test</button>
<button class="button">test</button>
<button class="button">test</button>
<button class="button">test</button>

这篇关于CSS:悬停和转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！