Biến đổi: quy mô trong css

lục mục lục

Nội dung chính Show

lục mục lục
Thay đổi cấu hình với biến đổi
Tùy chỉnh cấu hình tâm với biến đổi nguồn gốc
Lời kết
Nội dung chính
2D Transform là gì?
Chuyển đổi dịch()
Chuyển đổi xoay()
Chuyển đổi tỷ lệ()
Biến đổi skewX()
Chuyển đổi skewY()
Biến đổi skew()
Biến đổi ma trận()

Bài này thuộc phần 25 của 26 phần trong sê-ri Học CSS cơ bản

Ngoài thuộc tính

transform-origin: 100% 50%;

7 của CSS3 giúp bạn tạo ra các hiệu ứng chuyển động của các phần tử trong trang web, thì nó còn một thuộc tính khác được sử dụng kèm theo với

transform-origin: 100% 50%;

7 rất thường xuyên đó là thuộc tính

transform-origin: 100% 50%;

9 có chức năng thay đổi các định dạng

Thay đổi cấu hình với biến đổi

Với biến đổi, bạn có thể xoay, co giãn kích thước hoặc co lại hình dạng một phần tử. Ngoài ra nó còn có một số tính năng khác cũng liên quan đến việc làm thay đổi định dạng

Cách viết



transform: function( value );

-moz-transform: function( value );

-webkit-transform: function( value );

Trong đó,

transform-origin: 100% 50%;

0 là tên hàm làm thay đổi hình dạng và giá trị là giá trị của hàm, mỗi hàm có thể có cách viết giá trị khác nhau

Về các hàm làm thay đổi hình dạng cho biến đổi thì có rất nhiều nhưng mình chỉ nói qua một số hàm đơn giản thường dùng nhất

Các chức năng chuyển động của biến đổi

Xoáy –

transform-origin: 100% 50%;

Với hàm

transform-origin: 100% 50%;

1 bạn có thể thiết lập một đối tượng bị xoay theo góc độ. Ở chức năng này, bạn có thể thiết lập giá trị kiểu

transform-origin: 100% 50%;

3 (thiết lập giá trị góc, tức là độ) hoặc

transform-origin: 100% 50%;

4 (1 lượt = 360 độ). Các bạn xem ví dụ live dưới đây để hiểu hơn nhé

[codepen id=”Eaqvpg”]

Co giãn –

transform-origin: 100% 50%;

Với hàm

transform-origin: 100% 50%;

0 bạn có thể thiết lập co giãn kích thước của một phần tử dựa trên trục y (trục thẳng đứng) và trục x (trục ngang), và hàm này bạn sẽ thiết lập là

transform-origin: 100% 50%;

2 hoặc s

transform-origin: 100% 50%;

3 và

transform-origin: 100% 50%;

[codepen id=”bNXrOZ”]

Kéo nghiêng – skew()

Bạn có thể kéo một đối tượng dựa trên trục Y và trục X với hàm

transform-origin: 100% 50%;

5 và

transform-origin: 100% 50%;

6, giá trị bên trong là số

transform-origin: 100% 50%;

3 tương tự

transform-origin: 100% 50%;

[codepen id=”qEeXvX”]

Tùy chỉnh cấu hình tâm với biến đổi nguồn gốc

Một thuộc tính thú vị nữa mà bạn có thể sử dụng kèm theo biến đổi đó là

transform-origin: 100% 50%;

9, nó sẽ cho phép bạn dịch chuyển phần tử dựa trên kiểu thay đổi hình dạng ở

transform-origin: 100% 50%;

9. Nói nghe có vẻ khó hiểu, ví dụ như bạn sử dụng

transform-origin: 100% 50%;

1 để xoay ảnh và khi sử dụng thêm

transform-origin: 100% 50%;

9 thì nó sẽ cho phép bạn điều chỉnh độ lớn của vòng xoay tính từ phần tử tâm lý. Thuộc tính

transform-origin: 100% 50%;

9 phải được sử dụng kèm theo với

transform-origin: 100% 50%;

9 và có thể áp dụng cho bất kỳ hàm nào

Thuộc tính

transform-origin: 100% 50%;

9 có hai giá trị là X (phương pháp thẳng đứng) và Y (phương pháp nằm ngang) và giá trị của nó sẽ dựa trên kích thước của phần tử

transform-origin: 100% 50%;

[codepen id=”gbVGYQ”]

Lời kết

Bây giờ bạn đã thấy CSS thực sự thú vị chưa? . Tuy nhiên ở sê-ri CSS cơ bản này, mình sẽ dừng lại ở biến đổi vì bù lại đã quá đủ cho các kiến thức cơ bản CSS rồi. Những tính năng nâng cao hơn mình sẽ hướng dẫn ở CSS nâng cao hàng loạt

Transform in CSS là 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í giá trị, hình dạng hoặc xoay phần tử theo các chiều

Có 2 kiểu thường gặp là chuyển đổi 2D và 3D

(Chuyển đổi là cách gọi chung của hiệu ứng thay đổi định dạng, kích thước và vị trí của phần tử)

At this post, 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ễ hình dung

Nội dung chính

2D Transform là gì?

2D Transform là thuộc tính dùng để xử lý hiệu ứng chuyển đổi 2D

Cú pháp để tạo biến đổi như sau

transform-origin: 100% 50%;

Các giá trị thường được sử dụng là translate(), rotate(), scale(), skewX(), skewY(), matrix(). Các cụ thể như sau

ValueMô 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 chiều rộng và chiều cao

Chuyển đổi dịch()

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

transform-origin: 100% 50%;

Hình gốc

(*Các ví dụ trong bài viết đều được biến đổi từ hình này)

Hình đã được chuyển

transform-origin: 100% 50%;

Chuyển đổi xoay()

Rotate() trong Transform CSS sử dụng để xoay một phần tử theo chiều kim đồng hồ hoặc đảo chiều kim đồng hồ theo một góc nhất định, đơn vị sử dụng là độ (độ). Góc dương thì xoay theo chiều kim đồng hồ, góc âm thì người quay lại

Ví dụ: Xoay phần tử

theo chiều kim đồng hồ 20 deg:

transform-origin: 100% 50%;

Full code

transform-origin: 100% 50%;

Chuyển đổi tỷ lệ()

Sử dụng scale() để 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ể thu phóng phần tử để tăng hoặc thu nhỏ tùy ý, với x là thu phóng theo chiều ngang và y là thu phóng theo chiều dọc. Tỷ lệ 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 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ó

transform-origin: 100% 50%;

Full code

transform-origin: 100% 50%;

Biến đổi 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:

transform-origin: 100% 50%;

0skewX(30deg)

skewX(-30deg)

Chuyển đổi 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:

transform-origin: 100% 50%;

1skewY(30deg)

skewY(-30deg)

Biến đổi 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.

transform-origin: 100% 50%;

Full code

transform-origin: 100% 50%;

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:

transform-origin: 100% 50%;

Biến đổi ma trận()

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ố, bao gồm các chức năng cho phép bạn xoay, thu phóng và chuyển phần tử

Cú pháp của ma trận

transform-origin: 100% 50%;

Ví dụ

transform-origin: 100% 50%;

Bài trước. Use Web Font trong CSS

Bài tiếp theo. Chuyển đổi 3D trong CSS

Thứ Ba, 07/05/2019 11. 39

4,7 ★ 6 👨 13. 143

#CSS

0 Bình luận

Sắp xếp theo

Delete Login to Send

Bạn nên đọc

Gần 50% người dùng iPhone muốn đổi nhà mạng
COLORFUL ra mắt biến thể RTX 3090 phiên bản giới hạn, chỉ sản xuất 1000 chiếc, giá gần 5000 USD
Công bố thiết bị của tôi gây ra chứng khó thở khi ngủ
Khám phá bí mật kinh hoàng tại đảo đáng sợ bậc nhất hành tinh
Những hình ảnh chúc mừng sinh nhật siêu bựa bạn từng xem
Tốc độ quay vắt trên máy giặt là gì, tác dụng như thế nào?

CSS và CSS3

TOP code CSS xếp hạng sao (Star Rating) đẹp cho website

Xem thêm

CSS và CSS3

CSS cơ bản
- CSS giới thiệu
- Cú pháp và Selector CSS
- Vị trí đặt CSS
- CSS - Màu
- CSS - Nền
- CSS - Đường viền
- CSS - Ký quỹ
- CSS - Đệm
- CSS - Chiều rộng và Chiều cao
- CSS - Mô hình hộp
- CSS - Phác thảo
- CSS - Văn bản
- CSS - Phông chữ
- CSS - Biểu tượng
- CSS - Liên kết
- CSS - Tạo danh sách
- CSS - Bảng
- CSS - Hiển thị
- CSS - Chiều rộng tối đa
- CSS - Vị trí
- CSS - tràn
- CSS - Float và Clear
- CSS - Khối nội tuyến
- CSS - Căn chỉnh
- CSS - Trình kết hợp
- CSS - Lớp giả
- CSS - Phần tử giả
- CSS - Độ mờ
- CSS - Thanh điều hướng
- CSS - Trình đơn thả xuống
- CSS - Thư viện hình ảnh
- CSS - Sprite hình ảnh
- CSS - Bộ chọn thuộc tính
- CSS - Biểu mẫu
- CSS - Bộ đếm
- CSS - Bố cục
- CSS - Đơn vị
- CSS - Tính đặc hiệu
nâng cao CSS
- CSS - Góc bo tròn
- CSS - Hình ảnh đường viền
- CSS - Nhiều nền
- CSS - Màu
- CSS - Chuyển màu
- CSS - Hiệu ứng đổ bóng
- CSS - Hiệu ứng văn bản
- CSS - Phông chữ Web
- CSS - Chuyển đổi 2D
- CSS - Chuyển đổi 3D
- CSS - Chuyển tiếp
- CSS - Hoạt hình
- CSS - Chú giải công cụ
- CSS - Flexbox
- CSS - Nút
- CSS- @media
- Tạo hiệu ứng hover node bằng CSS

công nghệ
- Ứng dụng
- hệ thống
- Game - Trò chơi
- điện thoại Iphone
- Android
- Linux
- Nền web
- Đồng hồ thông minh
- Chụp ảnh - Quay phim
- hệ điều hành Mac
- Phần cứng
- SEO thủ thuật
- base format
- quả mâm xôi
- Dịch vụ ngân hàng
- Lập trình
- Online service
- Dịch vụ nhà mạng
- Nhà thông minh
Tải xuống
- Ứng dụng văn phòng
- Tải game
- Hệ thống tiện ích
- Ảnh, đồ họa
- Internet
- Bảo mật, Antivirus
- Họp, học trực tuyến
- Video, phim, nhạc
- Thư
- Lưu trữ đám mây
- Giao tiếp, liên lạc, hẹn hò
- Support for learning
- Máy ảo
Tiện ích
Khoa học
- Khoa học vui
- Khám phá khoa học
- Bí ẩn - Chuyện lạ
- Chăm sóc sức khỏe
- Khoa học Vũ trụ
- Khám phá thiên nhiên
Điện máy
- tủ lạnh
- tivi
- Điều hòa
- Máy giặt
Cuộc sống
- Kỹ năng
- Món ngon mỗi ngày
- làm đẹp
- nuôi dạy con
- Chăm sóc nhà cửa
- Kinh nghiệm Du lịch
- Halloween
- mẹo vặt
- giáng sinh - noel
- tết 2023
- quà tặng
- Giải trí
- Là gì?
- nhà đẹp
- ĐỨNG ĐẦU
- phong thủy
Băng hình
- công nghệ
- Phòng thí nghiệm của Cisco
- Phòng thí nghiệm của Microsoft
- Video Khoa học
Ô tô, Xe máy
- Giấy phép lái xe
Làng công nghệ
- Tấn công mạng
- Công nghệ
- new technology
- Trí tuệ nhân tạo (AI)
- Anh tài công nghệ
- Bình luận công nghệ
- Tổng hợp
Học CNTT
- quiz technology
- Microsoft Word 2016
- Microsoft Word 2013
- Word 2007
- Excel 2019
- Excel 2016
- Hàm Excel
- Microsoft PowerPoint 2019
- Microsoft PowerPoint 2016
- Google Trang tính - Trang tính
- mẫu mã
- photoshop CS6
- photoshop CS5
- HTML
- CSS và CSS3
- con trăn
- Học SQL
- Lập trình C
- Lập trình C++
- Lập trình C#
- Học HTTP
- Bootstrap
- Máy chủ SQL
- JavaScript
- Học PHP
- jQuery
- Học MongoDB
- Unix/Linux
- Học Git
- NodeJS

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. address. 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại. 024 2242 6188. E-mail. thông tin @ meta. vn. Chịu trách nhiệm nội dung. Lê Ngọc Lâm

programming css

Biến đổi: quy mô trong css

lục mục lục

Thay đổi cấu hình với biến đổi

Xoáy – transform-origin: 100% 50%;1

Co giãn – transform-origin: 100% 50%;0

Kéo nghiêng – skew()

Tùy chỉnh cấu hình tâm với biến đổi nguồn gốc

Lời kết

Nội dung chính

2D Transform là gì?

Chuyển đổi dịch()

Chuyển đổi xoay()

Chuyển đổi tỷ lệ()

Biến đổi skewX()

Chuyển đổi skewY()

Biến đổi skew()

Biến đổi ma trận()

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Xoáy –
transform-origin: 100% 50%;
1

Co giãn –
transform-origin: 100% 50%;
0