如何在css3中放大懸停的任何類或ID？

我現在正在研究CSS3但在CSS3不工作類中的任何一個可以幫助我如何在css3中放大懸停的任何類或ID？

<!DOCTYPE html> 
<html> 
<head> 
    <title>Zoom Hover</title> 
     <style type="text/css"> 

    @-moz-keyframes 'zoom' { 
     0%{ 
      height:200px; 
      width:200px; 
      } 
     100% { 
       width: 1000px; 
       height: 1000px; 
      } 
    } 

    @-webkit-keyframes 'zoom' { 
     0%{ 
      height:200px; 
      width:200px; 
      } 
     100% { 
       width: 1000px; 
       height: 1000px; 
      } 
    }  

.aaa{ 
    width:200px; 
    height:auto; 

    } 

.aaa:hover { 
    -moz-animation-name: 'zoom' 2s; 
} 
.aaa:hover { 
    -webkit-animation: 'zoom' 2s; 
} 
.aaa{ 
    width:200px; 
    height:200px; 
    -moz-transition-duration: 2s; /* firefox */ 
    -webkit-transition-duration: 2s; /* chrome, safari */ 
    -o-transition-duration: 2s; /* opera */ 
    -ms-transition-duration: 2s; /* ie 9 */ 
} 
.aaa:hover { 
    width: 1000px; 
    height: 1000px; 
} 
    </style> 
</head> 
<body> 

<div class="aaa"style="width:100px;height:100px;background:red;"></div> 
</body> 
</html>

有沒有辦法做到這一點任何一個幫助我請，沒有任何網站對CSS3的學習？

來源

2013-09-26 user2717260

如果你真的想「變焦」的元素使用CSS，你應該使用一個轉換，並將其擴展到你想要的大小：

transform: scale(2);

這將規模因素，並且將其全部內容2.

的因素下面是一個完全工作的例子：

CSS

.test { 
    width: 100px; 
    height: 100px; 

    -webkit-transition: all 2s ease-in-out; 
    -moz-transition: all 2s ease-in-out;  
    -ms-transition: all 2s ease-in-out; 
    -o-transition: all 2s ease-in-out;  
    transition: all 2s ease-in-out; 
} 

.test:hover { 
    -webkit-transform: scale(2); 
    -moz-transform: scale(2); 
    -ms-transform: scale(2); 
    -o-transform: scale(2); 
    transform: scale(2); 
}

演示

Try before buy（使用轉換和縮放）

你試圖做什麼，是改變元素的尺寸。這實際上不會縮放元素，但會使其變大。子元素不受此影響。

CSS

.test:hover { 
    width: 200px; 
    height: 200px; 
}

演示

Try before buy（使用過渡）

來源

2013-09-26 08:21:18 insertusernamehere

感謝insertusernamehere：您可以通過動畫的變化，而不是實現這一目標更容易 – user2717260

如何在css3中放大懸停的任何類或ID？

回答

相關問題