Mục đích của bài viết này là xoay một phần tử HTML bằng cách sử dụng thuộc tính biến đổi CSS. Thuộc tính này được sử dụng để di chuyển, xoay, chia tỷ lệ và thực hiện các loại chuyển đổi khác nhau của các phần tử Show
Hàm rotate() có thể được sử dụng để xoay bất kỳ phần tử HTML nào hoặc được sử dụng để chuyển đổi. Phải mất một tham số xác định góc quay. Góc quay bao gồm hai phần, giá trị của góc quay tiếp theo là đơn vị quay. Đơn vị có thể được xác định theo độ (deg), độ dốc (grad), radian (rad) và lần lượt Hàm độCó 360 độ trong một vòng tròn đầy đủ. Định danh đơn vị cho độ là Đây là một ví dụ về việc sử dụng độ với hàm Chạy Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp Xem trước trình chỉnh sửa điểm tốt nghiệpCó 400 gradian trong một vòng tròn đầy đủ. Định danh đơn vị cho gradian là Thang điểm còn được gọi là "gons" hoặc "grades" (mặc dù đây không phải là mã định danh đơn vị hợp lệ — bạn vẫn nên sử dụng Đây là một ví dụ về việc sử dụng gradient Chạy Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp Xem trước trình chỉnh sửa radianCó 2Ï€ radian trong một vòng tròn đầy đủ. Định danh đơn vị cho radian là Đây là một ví dụ về việc sử dụng radian Chạy Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp Xem trước trình chỉnh sửa rẽCó 1 lượt trong một vòng tròn đầy đủ. Định danh đơn vị cho lượt là Đây là một ví dụ về việc sử dụng lượt Chạy Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp Xem trước trình chỉnh sửa Giá trị âmBạn cũng có thể sử dụng các giá trị âm cho góc. Giá trị âm sẽ xoay phần tử theo hướng ngược chiều kim đồng hồ Thí dụ Chạy Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp Xem trước trình chỉnh sửa Thêm .stripe { background-image: linear-gradient(240deg, #eaee44, #90ec19); padding: 5rem; }3Gốc mặc định cho phép quay là Chạy Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp Xem trước trình chỉnh sửa Cú pháp chính thứcCú pháp chính thức của hàm Những giá trị khả thiHàm degĐộ. Có 360 độ trong một vòng tròn đầy đủ. gradGradians, còn được gọi là "gons" hoặc "grades" (mặc dù đây không phải là số nhận dạng đơn vị hợp lệ — bạn vẫn nên sử dụng grad làm số nhận dạng đơn vị). Có 400 gradian trong một vòng tròn đầy đủ. Góc khôngMã định danh đơn vị là tùy chọn cho các góc bằng không. Ví dụ: cả Với tất cả các công cụ mà chúng tôi có được trong CSS, các nhà thiết kế sẽ có khả năng mới để thử nghiệm. Tôi đã viết về một số công cụ đó trên Thủ thuật CSS. Năm nỗi sợ hãi trong thiết kế cần đánh bại với CSS Grid Tôi vẫn tin rằng lấy cảm hứng từ thiết kế punk rock của thập niên 70 và 80 sẽ là một xu hướng Nếu bạn muốn bắt đầu với quy mô nhỏ, hãy giới thiệu một số góc độ cho thiết kế của bạn. Đây là một thủ thuật đơn giản để tạo góc cho một dải nội dung mà không cần thêm khoảng trắng khó xử Bắt đầu với một sọc thông thường Chúng ta đều biết mẫu thiết kế này. nền có chiều rộng đầy đủ và nội dung quảng cáo đẹp mắt Chúng tôi thiết lập đánh dấu rất đơn giản Thêm một chút CSS rất đơn giản và chúng ta đã hoàn thành Đây là một dải nội dung đáng yêu có thể sử dụng được. Bạn cũng có thể khám phá một linear-gradient đẹp khi bạn ở đó sử dụng chuyển đổi. rotate() để giới thiệu gócThuộc tính CSS biến đổi có vô số chức năng tuyệt vời. Một trong những chức năng dễ sử dụng nhất là rotate(). Nó nhận một đơn vị góc chẳng hạn như 45 độ và xoay phần tử theo lượng đó. Số nguyên dương là vòng quay theo chiều kim đồng hồ và số âm là vòng quay ngược chiều kim đồng hồ Bạn sẽ nhận thấy từ bức ảnh rằng đây là một vấn đề. Đây vẫn là một hình chữ nhật và bằng cách xoay hình chữ nhật, chúng ta thấy các góc Điều này không mang lại cảm giác chuyên nghiệp, vì vậy chúng tôi cần điều này để luôn ở cạnh trình duyệt skew() để giải cứuBằng cách lấy cùng một góc mà chúng ta đã sử dụng trong hàm rotate(), chúng ta có thể nghiêng phần tử về phía sau. Điều này nghiêng bên trái và bên phải của phần tử của chúng tôi trở lại điểm xuất phát của chúng Thuộc tính biến đổi có thể đảm nhận nhiều chức năng, vì vậy chúng tôi áp dụng nó trên cùng một dòng CSS Con mắt thiết kế sành điệu sẽ nhận thấy một vấn đề nữa với việc triển khai của chúng tôi. Văn bản bây giờ bị lệch. Đây có thể là một cái gì đó bạn muốn. Văn bản bị lệch làm tôi hơi khó chịu, vì vậy hãy bỏ nó đi Thời gian để mở khóa văn bảnTôi không phải là người thích giới thiệu đánh dấu mới cho kiểu dáng nếu tôi có thể tránh được, nhưng với việc giới thiệu vùng chứa nội dung, chúng tôi có thể sửa lỗi văn bản bị lệch Rất có thể, dù sao thì bạn cũng đã có một vùng chứa ở đây để đặt chiều rộng cho nội dung của mình Bằng cách áp dụng độ nghiêng của góc âm mà chúng ta đang sử dụng, văn bản sẽ nghiêng lại về góc ban đầu. Bạn cũng có thể sử dụng phương pháp này để bỏ xoay văn bản, nếu đó là nhu cầu của bạn đánh dấu đầy đủ CSS đầy đủ Điều này mang lại cho chúng ta những đường nét rõ ràng với một chút nhạc punk rock. Xem hoạt động này trên CodePen Nếu bạn vẫn đang làm mọi thứ theo cách mà bạn đã luôn làm, thì đã đến lúc thêm gia vị cho mọi thứ. Thêm các góc là một cách dễ dàng và không gây đau đớn để đưa một số cayenne vào quy trình thiết kế của bạn CSS xoay hoạt động như thế nào?Hàm CSS rotate() xác định phép biến đổi xoay một phần tử quanh một điểm cố định trên mặt phẳng 2D mà không làm biến dạng phần tử đó . Kết quả của nó là kiểu dữ liệu
Làm cách nào để xoay bằng CSS?Xoay ảnh bằng hàm rotate()
. Hình ảnh được xoay dựa trên đối số được truyền cho hàm này theo các đơn vị được CSS hỗ trợ, chẳng hạn như độ, độ dốc, lượt hoặc radian. use the rotate(arg) function to rotate an image in a two-dimensional space. The image is rotated based on the argument passed to this function in CSS-supported units, such as degree, gradian, turn, or radian.
Làm cách nào để xoay SVG bằng CSS?Chỉ cần sử dụng bộ chọn loại phần tử và thêm biến đổi. rotate(180deg) thuộc tính thành thuộc tính như trong đoạn mã bên dưới. Lưu câu trả lời này. |
