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>