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

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

Thuộc tính transform với giá trị skew: Xác định sự biến đổi nghiêng 2D dọc theo trục X và Y.

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: skew():

transform

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

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

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

transform

Giá trị skew();

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

transform
skew(0,y) transform: skew(0deg,20deg);
-moz-transform: skew(0deg,20deg);
-webkit-transform: skew(0deg,20deg);
-o-transform: skew(0deg,20deg);
-ms-transform: skew(0deg,20deg);

transform
transform: skew(0deg,10deg);
-moz-transform: skew(0deg,10deg);
-webkit-transform: skew(0deg,10deg);
-o-transform: skew(0deg,10deg);
-ms-transform: skew(0deg,10deg);

transform
transform: skew(0deg,0deg);
-moz-transform: skew(0deg,0deg);
-webkit-transform: skew(0deg,0deg);
-o-transform: skew(0deg,0deg);
-ms-transform: skew(0deg,0deg);

transform
transform: skew(0deg,-10deg);
-moz-transform: skew(0deg,-10deg);
-webkit-transform: skew(0deg,-10deg);
-o-transform: skew(0deg,-10deg);
-ms-transform: skew(0deg,-10deg);

transform
transform: skew(0deg,-20deg);
-moz-transform: skew(0deg,-20deg);
-webkit-transform: skew(0deg,-20deg);
-o-transform: skew(0deg,-20deg);
-ms-transform: skew(0deg,-20deg);

transform
skew(x,0) transform: skew(20deg,0deg);
-moz-transform: skew(20deg,0deg);
-webkit-transform: skew(20deg,0deg);
-o-transform: skew(20deg,0deg);
-ms-transform: skew(20deg,0deg);

transform
transform: skew(10deg,0deg);
-moz-transform: skew(10deg,0deg);
-webkit-transform: skew(10deg,0deg);
-o-transform: skew(10deg,0deg);
-ms-transform: skew(10deg,0deg);

transform
transform: skew(0deg,0deg);
-moz-transform: skew(0deg,0deg);
-webkit-transform: skew(0deg,0deg);
-o-transform: skew(0deg,0deg);
-ms-transform: skew(0deg,0deg);

transform
transform: skew(-10deg,0deg);
-moz-transform: skew(-10deg,0deg);
-webkit-transform: skew(-10deg,0deg);
-o-transform: skew(-10deg,0deg);
-ms-transform: skew(-10deg,0deg);

transform
transform: skew(-20deg,0deg);
-moz-transform: skew(-20deg,0deg);
-webkit-transform: skew(-20deg,0deg);
-o-transform: skew(-20deg,0deg);
-ms-transform: skew(-20deg,0deg);

transform
skew(x,y) transform: skew(20deg,20deg);
-moz-transform: skew(20deg,20deg);
-webkit-transform: skew(20deg,20deg);
-o-transform: skew(20deg,20deg);
-ms-transform: skew(20deg,20deg);

transform
transform: skew(10deg,10deg);
-moz-transform: skew(10deg,10deg);
-webkit-transform: skew(10deg,10deg);
-o-transform: skew(10deg,10deg);
-ms-transform: skew(10deg,10deg);

transform
transform: skew(0deg,0deg);
-moz-transform: skew(0deg,0deg);
-webkit-transform: skew(0deg,0deg);
-o-transform: skew(0deg,0deg);
-ms-transform: skew(0deg,0deg);

transform
transform: skew(-10deg,-10deg);
-moz-transform: skew(-10deg,-10deg);
-webkit-transform: skew(-10deg,-10deg);
-o-transform: skew(-10deg,-10deg);
-ms-transform: skew(-10deg,-10deg);

transform
transform: skew(-20deg,-20deg);
-moz-transform: skew(-20deg,-20deg);
-webkit-transform: skew(-20deg,-20deg);
-o-transform: skew(-20deg,-20deg);
-ms-transform: skew(-20deg,-20deg);

transform