transform-scale

transform-scaleは、指定した軸の大きさを変えます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <style>
        .a {
            width: 50px;
            height: 50px;
            padding: 10px;
            margin: 30px;
            background-color:#ff0000;
            border-top:solid 10px #0000ff;
            border-radius:10px;
            transform-origin:top left;
            transform:scaleX(2);
        }
    </style>
</head>
<body>
    <div class="a">foo</div>
</body>
</html>

XはX座標で横軸を示しており、引数で2倍に指定しています。

f:id:hrt0kmt:20140713162607p:plain

            transform-origin:top left;
            transform:scale(1.3, 2);

この場合は、横が1.3倍になり、縦が2倍になります。

f:id:hrt0kmt:20140713162813p:plain

対応しているOSはこちら