使用Css轉換和變換的縮放效果？

我有一個大小爲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軸。

基本上，我想要一個平滑的緩動縮放效果懸停。

請建議。

來源

2013-01-23 Sangam254

通過嘗試在同一時間對尺寸和變形進行縮放，可能會使問題過於複雜化。

只需應用scale變換即可實現所需功能，儘管大比例尺可能會在圖像和文本上產生模糊效果。

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

來源

2013-01-23 12:23:06 amustill

使用Css轉換和變換的縮放效果？

回答

相關問題