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

将scale - 部分中的:hover更改为小于1的任何内容都会使其与使用1.1时的操作相反。

查看此fiddle

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的意思。

如何执行webkit转换扩展

1 个答案: