Ví dụ về thuộc tính transform: scale()

Thuộc tính transform với giá trị scale()

Thuộc tính transform với giá trị scale: Xác định một biến đổi tỷ lệ, 2D.

HTML viết:

<html>
<head></head>
<body>
<p>transform</p>
</body>
</html>

CSS viết:

p {
    background: #cc0000;
    height: 50px;
    margin: 0 auto;
    width: 120px;
}

Hiển thị trình duyệt khi chưa có transform: scale():

transform

Thêm thuộc tính transform: scale(), CSS viết:

p {
    background: #cc0000;
    height: 50px;
    margin: 0 auto;
    width: 120px;
    transform: scale(2,2);
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    -o-transform: scale(2,2);
    -ms-transform: scale(2,2);
}

Hiển thị trình duyệt khi có transform: scale()

transform

Giá trị scale();

Giá trị Ví dụ Hiển thị
Bình thường transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);

transform
scale() transform: scale(0.5,0.5);
-moz-transform: scale(0.5,0.5);
-webkit-transform: scale(0.5,0.5);
-o-transform: scale(0.5,0.5);
-ms-transform: scale(0.5,0.5);

transform
transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);

transform
transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
-o-transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);

transform
transform: scale(1,1.3);
-moz-transform: scale(1,1.3);
-webkit-transform: scale(1,1.3);
-o-transform: scale(1,1.3);
-ms-transform: scale(1,1.3);

transform
transform: scale(1.5,1);
-moz-transform: scale(1.5,1);
-webkit-transform: scale(1.5,1);
-o-transform: scale(1.5,1);
-ms-transform: scale(1.5,1);

transform