San*_*254 2 transform css3 css-transitions
我有一个尺寸为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轴.
基本上,我想要一个平滑的缓动缩放效果悬停.
请建议.
amu*_*ill 16
通过尝试同时缩放尺寸和变换,您会使问题过于复杂.
简单地应用scale变换将实现所需,尽管大尺度可以在图像和文本上产生模糊.
.button:hover {
/* Un-prefixed. Prefix `transform` for all target browsers. */
transform: scale(1.2);
}