使用 Css 过渡和变换的缩放效果？答案

【问题标题】：Zoom effect using Css transition and transform?使用 Css 过渡和变换的缩放效果？
【发布时间】：2013-01-06 21:35:34
【问题描述】：

我有一个 50 x 50 大小的按钮。在悬停时，我需要用一个 70 x 70 大小的按钮替换这个按钮。此外，过渡应该是平稳的。

所以，我正在尝试使用 CSS 过渡和变换功能。即z轴的transform3d。

<style>

.button1{
    position:absolute;
    top:0px;
    left:0px;
    display:inline-block;
    width:50px;
    height:50px;
    background:url(images/button.png) no-repeat;
    background-position:bottom left;
    /* Transition */
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.button1:hover{
    width:70px;
    height:70px;
    background-position:top left;
    -webkit-transform: translate3d(0, 0, 10px);
    -moz-transform: translate3d(0, 0, 10px);
    -ms-transform: translate3d(0, 0, 10px);
    -o-transform: translate3d(0, 0, 10px);
}

</style>

</head>
<body>
<a href="#" class="button1"></a>
</body>

我已经为 x 和 y 变换尝试了这段代码，它可以工作。但是，它不适用于 z 轴。

基本上，我希望在悬停时获得平滑的缓动缩放效果。

请提出建议。

【问题讨论】：

标签： css transform css-transitions

【解决方案1】：

尝试同时缩放维度和变换，使问题过于复杂。

只需应用scale 转换即可实现所需，尽管大比例尺会在图像和文本上产生模糊。

.button:hover {
    /* Un-prefixed. Prefix `transform` for all target browsers. */
    transform: scale(1.2);
    }

【讨论】：