CSS3 ile Hover Transform Scale İşlemi | Kod Blok
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Transform Scale CSS3</title>
<style>
body{
width:100vw;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
.box{
width:200px;
height:200px;
background:#16a085;
border-radius:12px;
/*
Bu satırda hover olduğunda olacak geçiş animasyonunun süresi, hangi property'ler için olacağı ve hangi efekt kullanılacağı seçiliyor.
*/
transition:.2s all ease-in;
}
.box:hover{
/*
1.2 ile scale işlemi yaptığımızda kutu boyutu %120 boyutuna geliyor.
*/
transform:scale(1.2);
-ms-transform: scale(1.2); /* IE 9 */
-webkit-transform: scale(1.2); /* Safari and Chrome */
-o-transform: scale(1.2); /* Opera */
-moz-transform: scale(1.2); /* Firefox */
}
</style>
</head>
<body>
<div class='box'>
</div>
</body>
</html>