Thứ Hai, 30 tháng 12, 2013
CSS3 2D Transforms
CSS3 Transforms
Với CSS3 biến đổi, chúng ta có thể di chuyển, các yếu tố quy mô, lần lượt, quay, và căng ra.
Làm thế nào nó làm việc?
Một chuyển đổi là một hiệu ứng cho phép một sự thay đổi yếu tố hình dạng, kích thước và vị trí.
Bạn có thể chuyển đổi các yếu tố của bạn bằng cách sử dụng 2D hoặc chuyển đổi 3D.
Hỗ trợ trình duyệt
| Tài sản | Hỗ trợ trình duyệt | ||||
|---|---|---|---|---|---|
| chuyển đổi | |||||
Internet Explorer 10, Firefox, và Opera hỗ trợ chuyển đổi tài sản.
Chrome và Safari đòi hỏi các tiền tố-webkit-.
Lưu ý: Internet Explorer 9 đòi hỏi các tiền tố-ms-.
Transforms 2D
Trong chương này, bạn sẽ tìm hiểu về các phương pháp chuyển đổi 2d:
- translate()
- rotate()
- scale()
- skew()
- matrix()
Bạn sẽ tìm hiểu về 3D biến đổi trong chương kế tiếp.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello</div>
</body>
</html>
Thử nó cho mình »
Các dịch () Phương pháp
Với dịch () phương pháp, di chuyển phần tử từ vị trí hiện tại của nó, tùy thuộc vào các thông số đưa ra cho bên trái (X-axis) và đầu (trục Y) vị trí:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
Thử nó cho mình »
Giá trị dịch (50px, 100px) di chuyển các phần tử 50 pixel từ bên trái, và 100 pixel từ đầu trang.
Rotate () Phương pháp
Với rotate () phương pháp, yếu tố xoay chiều kim đồng hồ ở một mức độ nhất định. Giá trị âm được phép và quay các yếu tố ngược kim đồng hồ.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
Thử nó cho mình »
Các giá trị xoay (30deg) quay các yếu tố chiều kim đồng hồ 30 độ.
Quy mô () Phương pháp
Với quy mô () phương pháp, tăng yếu tố hoặc giảm kích thước, phụ thuộc vào các thông số đưa ra cho chiều rộng (X-axis) và chiều cao (trục Y):
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-webkit-transform:scale(2,4); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
Thử nó cho mình »
Quy mô giá trị (2,4) biến đổi chiều rộng là hai lần kích thước ban đầu của nó, và chiều cao 4 lần kích thước ban đầu của nó.
Nghiêng () Phương pháp
Với nghiêng () phương pháp, các yếu tố biến trong một góc độ nhất định, tùy thuộc vào các thông số đưa ra cho ngang (trục X) và dọc (trục Y) dòng:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
Thử nó cho mình »
Nghiêng giá trị (30deg, 20deg) lần lượt các phần tử 30 độ quanh trục X, và 20 độ quanh trục Y.
Ma trận () Phương pháp
Phương pháp ma trận () kết hợp tất cả các phương pháp chuyển đổi 2D thành một.
Phương pháp ma trận có sáu tham số, có chứa các chức năng toán học, cho phép bạn: xoay, quy mô, di chuyển (dịch), và nghiêng yếu tố.
Ví dụ
Làm thế nào để xoay một phần tử div 30 độ, bằng cách sử dụng phương pháp ma trận:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
Thử nó cho mình »
2D chuyển đổi phương pháp
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét