如何执行webkit变换缩放

Question

我正在尝试编辑下面的代码。

#snaps .content-area .snap-item {
    width: 350px;
    height: 215px;
    border: 5px solid #fff;
    background-color: #fff;
    float: left;
    display: inline-block;
    margin: 0 20px 50px;
    -webkit-transition: all .15s linear;
    -moz-transition: all .15s linear;
    -o-transition: all .15s linear;
    transition: all .15s linear;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
#snaps .content-area .snap-item:hover {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}

它创建了一个放大功能，但实际上我想做相反的事情，或者有一个选项，我可以在悬停状态下做什么。我已经看过了，但似乎找不到任何明确的东西，所以希望这里有一些知识渊博的人可以帮助!

Answer 1

将:hover -部分中的scale更改为小于1的值将使其与使用1.1时所做的相反。

看看这个小提琴

CSS:

#snap-item:hover {
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    -o-transform: scale(.8, .8);
    -ms-transform: scale(.8, .8);
    transform: scale(.8,.8);
}

这是非常基本的CSS。另外，我不知道你说的have options for what I can do on a hover state是什么意思。