大きさを変更する #transform #ベンダープレフィックス

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <style>
        div {
            width: 50px;
            height: 50px;
            padding: 10px;
            margin: 30px;
            background-color:orange;
            border-top:solid 10px #0000ff;
            border-radius:10px;
        }
        .b {
            transform:scale(1.2, 1.5);
        }
    </style>
</head>
<body>
    <div class="a">foo</div>
    <div class="b">bar</div>
</body>
</html>

scaleの第1引数がX(横)座標、第2引数がY(縦)座標です。

f:id:hrt0kmt:20140713153403p:plain

transformで大きさを変更出来ます。

f:id:hrt0kmt:20140713153456p:plain

SafariChromeIE9-webkit-transform:scale()のようにベンダープレフィックスで指定してあげる必要があります(2014年現在)。