2
我有一个大小为50 x 50的按钮。悬停时,我需要用70 x 70大小的按钮替换此按钮。另外,过渡应该平稳。使用Css转换和变换的缩放效果?
所以,我试图使用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轴。
基本上,我想要一个平滑的缓动缩放效果悬停。
请建议。