CSS3 scale() - IT书包

HTML

CSS

JavaScript

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT书包</title>
</head>
<body>

<div class="demo_box scale_1">宽度缩小80%，高度放大120%</div>
<div class="demo_box scale_2">宽高同时缩小一半</div>
<div class="demo_box scale_3">先翻转再放大1.2倍</div>

</body>
</html>

CSS

.code-preview{
    height: 300px;
    position: relative;
}
.demo_box {
    border: 1px solid #3DA5DC;
    background: #a4dcf9;
    height: 100px;
    width: 200px;
    text-align: center;
    color: #fff;
}
.scale_1{
    -webkit-transform:scale(0.8,1.2);
    -moz-transform:scale(0.8,1.2);
    position:absolute;
    left:0;
    top:80px;
    background:#4d6ea6;
}
.scale_2{
    -webkit-transform:scale(0.5);
    -moz-transform:scale(0.5);
    position:absolute;
    left:200px;
    top:80px;
    background:#b9f9cb;
}
.scale_3{
    -webkit-transform:scale(-1.2,1.2);
    -moz-transform:scale(-1.2,1.2);
    position:absolute;
    left:450px;
    top:80px;
}

JavaScript