Trục z trong css có hướng
|
Show Ứng dụng của
Cấu trúctag {
transform: giá trị;
}Giá trị của Cách sử dụngHTML viết:
CSS viết - khi chưa sử dụng p {
background: #7ACAFF;
height: 100px;
width: 100px;
}Hiển thị trình duyệt: Ta sẽ xem xét vài giá trị của CSS viết: p {
background: #7ACAFF;
height: 50px;
transform: rotate(45deg);
width: 120px;
}Hiển thị trình duyệt: Kết quả cho ta thấy, thành phần p hiện tại đã được xoay một góc 45 độ, các bạn xem thêm một vài ví dụ bên dưới nhe: Ví dụ thêm - Một số transform thường dùngDịch chuyển dọc p {
background: #7ACAFF;
height: 50px;
transform: translateX(100px);
width: 120px;
}Biến đổi nghiên theo trục X p {
background: #7ACAFF;
height: 50px;
transform: skewX(30deg);
width: 120px;
}Các giá trị khác, bạn có thể xem thêm tại tham khảo transform hoặc sử dụng công cụ tạo transform để khám phá nhiều tính năng hơn.
Định nghĩa và sử dụngThuộc tính transform xác định một chuyển đổi 2 chiều, 3 chiều, có thể là xoay, tỷ lệ, di chuyển, nghiêng, ... Transform trong CSS là những thuộc tính dùng để "biến hình" cho các phần tử ban đầu, cho phép chúng ta thay đổi vị trị, hình dáng hay xoay phần tử theo các chiều. Có 2 kiểu thường gặp là 2D and 3D transformation. (Transformation là cách gọi chung của hiệu ứng thay đổi hình dạng, kích thước và vị trí của phần tử) Ở bài viết này, Quantrimang.com sẽ cùng bạn tìm hiểu về 2D Transform, các giá trị, cách sử dụng cũng như những ví dụ cụ thể nhất để bạn dễ dàng hình dung. Nội dung chính
2D Transform là gì?2D Transform là những thuộc tính dùng để xử lý hiệu ứng di chuyển 2D. Cú pháp để tạo transform như sau: Các giá trị thường được sử dụng là translate(), rotate(), scale(), skewX(), skewY(), matrix(). Cụ thể như sau: Giá trịMô tảtranslate(x,y)Di chuyển phần tử theo trục x và trục ytranslateX(n)Di chuyển phần tử theo trục xtranslateY(n)Di chuyển phần tử theo trục yscale(x,y)Thay đổi độ rộng và chiều cao của phần tửscaleX(n)Thay đổi độ rộng của phần tửscaleY(n)Thay đổi chiều cao của phần tửrotate(angle)Xoay phần tử theo một góc (angle)skew(x-angle,y-angle)Định dạng phần tử nghiêng theo một gócskewX(angle)Định dạng phần tử nghiêng một góc theo trục xskewY(angle)Định dạng phần tử nghiêng một góc theo trục ymatrix(n,n,n,n,n,n)Tổng hợp giữa scale, skew và translateTransform translate() Translate() di chuyển một phần tử từ vị trí hiện tại của nó với các tham số đã cho theo trục X và trục Y. X là dịch theo chiều ngang còn Y là dịch theo chiều dọc. Ví dụ: Di chuyển phần tử sang phải 100 pixel, lui xuống dưới 50 pixel từ vị trí hiện tại
Hình gốc : (*Các ví dụ trong bài viết đều được transform từ hình này) Hình đã được dịch chuyển:
Transform rotate()Rotate() trong Transform CSS sử dụng để xoay một phần tử theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ theo một góc nhất định, đơn vị sử dụng là degree (deg). Góc dương thì xoay theo chiều kim đồng hồ, góc âm thì người lại. Ví dụ: Xoay phần tử theo chiều kim đồng hồ 20 deg:
Code đầy đủ:
Transform scale()Scale() sử dụng để thay đổi độ rộng và chiều cao của phần tử. Hiểu một cách đơn giản là bạn có thể zoom phần tử to lên hoặc nhỏ lại tùy ý, với x là zoom chiều ngang và y là zoom chiều dọc. Scale không có đơn vị mà tính theo tỉ lệ với phần tử gốc, ví dụ 1 là giữ nguyên 2 là tăng lên gấp đôi, 3 là tăng gấp 3... Ví dụ: Tăng phần tử lên gấp hai lần chiều rộng và ba lần chiều cao ban đầu của nó
Code đầy đủ:
Transform skewX()SkewX() làm nghiêng một phần tử theo trục X với góc truyền vào. Ví dụ: Nghiêng phần tử 30 độ theo trục X: skewX(30deg) Transform skewY()SkewY() làm nghiêng một phần tử theo trục Y với góc truyền vào. Ví dụ: Nghiêng phần tử 30 độ theo trục Y: skewY(30deg) Transform skew()Skew() là sự kết hợp của cả skewX và skewY, làm nghiêng một phần tử theo cả trục X và Y với góc truyền vào. Ví dụ: Nghiêng phần tử 30 độ theo trục X và 10 độ theo trục Y.
Code đầy đủ: 0 Nếu tham số thứ hai trong skew() không được chỉ định, chương trình sẽ tự động hiểu số đó là x còn y sẽ có giá trị là 0. Vậy ví dụ sau sẽ nghiêng phần tử 20 độ theo trục X:
1 Transform matrix()Matrix() là kết hợp của tất cả các phương thức 2D Transform, tổng hợp của scale, skew và translate. Matrix() có sáu tham số, chứa các hàm cho phép bạn xoay, zoom và di chuyển phần tử. Cú pháp của matrix: 2 Ví dụ: 3 Bài trước: Sử dụng Web Font trong CSS Bài tiếp: 3D Transform trong CSS Thứ Ba, 07/05/2019 11:39 4,7 ★ 6 👨 13.013 #CSS 0 Bình luận Sắp xếp theo Xóa Đăng nhập để Gửi Bạn nên đọc
CSS và CSS3
CSS và CSS3
Giới thiệu | Điều khoản | Bảo mật | Hướng dẫn | Ứng dụng | Liên hệ | Quảng cáo | Facebook | Youtube | DMCA Giấy phép số 362/GP-BTTTT. Bộ Thông tin và Truyền thông cấp ngày 30/06/2016. Cơ quan chủ quản: CÔNG TY CỔ PHẦN MẠNG TRỰC TUYẾN META. Địa chỉ: 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại: 024 2242 6188. Email: [email protected]. Chịu trách nhiệm nội dung: Lê Ngọc Lam. Bản quyền © 2003-2022 QuanTriMang.com. Giữ toàn quyền. Không được sao chép hoặc sử dụng hoặc phát hành lại bất kỳ nội dung nào thuộc QuanTriMang.com khi chưa được phép. |
