Hàm CSS xoay () làm lệch một phần tử theo một số độ nhất định. Bạn có thể xoay một phần tử theo chiều kim đồng hồ bằng cách sử dụng một số độ dương. Hoặc, bạn có thể xoay một phần tử ngược chiều kim đồng hồ bằng cách sử dụng số âm.
Hôm nay chúng ta sẽ học cách xoay các phần tử bằng CSS. Tại sao chúng ta nên xoay một phần tử? Các phần tử xoay vòng làm cho trang web của bạn tương tác hơn. Được sử dụng đúng cách, một phần tử xoay sẽ tăng thêm tính thẩm mỹ cho trang web của bạn.
Trong khi đọc bài viết này, vui lòng tham khảo repo đi kèm, để bạn có thể thấy các khái niệm đang hoạt động. Biết cách xoay một phần tử sẽ là một bổ sung có giá trị cho hộp công cụ CSS của bạn.
CSS xoay ()
Hàm xoay CSS cho phép bạn xoay một phần tử trên trục 2D. Hàm xoay () chấp nhận một đối số:góc mà bạn muốn xoay phần tử web của mình. Bạn có thể xoay phần tử theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ.
Hãy xem cú pháp của hàm xoay ():
transform: rotate(angle);
Giá trị "angle" đại diện cho số độ mà phần tử sẽ xoay. Bạn có thể chỉ định một vòng xoay theo chiều kim đồng hồ bằng cách sử dụng số độ dương (tức là 45). Hoặc, bạn có thể xoay theo hướng ngược lại bằng cách sử dụng giá trị độ âm (tức là -39).
Hàm xoay () có thể áp dụng cho bất kỳ phần tử HTML nào. Ví dụ, bạn có thể xoay một đoạn văn bản. Hoặc bạn có thể xoay một hình ảnh.
Xoay HTML xuất hiện ngay khi bạn kết xuất trang để không có xoay hiển thị. Để xem việc xoay vòng đang hoạt động, bạn nên sử dụng chuyển tiếp CSS. Các chuyển đổi thay đổi trạng thái của một phần tử khi một hành động được thực hiện, chẳng hạn như khi con trỏ di chuột qua một phần tử.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Ví dụ CSSxoay ()
Hãy tiếp tục và tạo trang HTML của chúng tôi để đặt một hộp xoay. Hãy thêm một hộp làm div và tạo cho nó một lớp (đặt tên là “xoay”).
<div class="rotate"></div>
Bây giờ, hãy thêm một số kiểu cho nó:
div.rotate {
width: 50px;
height: 50px;
background-color: chocolate;
} Làm cho khỏe lại. Tuyệt vời, chúng tôi có một hộp màu. Với hộp màu này, chúng ta có tất cả những gì chúng ta cần để bắt đầu sử dụng hàm xoay ().
Để xoay hộp của chúng ta, trước tiên chúng ta cần thảo luận về thuộc tính chuyển đổi.
Chức năng biến đổi CSS như tên của nó, biến đổi các phần tử. Một trong những chức năng chúng tôi có thể áp dụng cho nó, là xoay () . Thuộc tính biến đổi có thể đảm nhiệm nhiều chức năng khác và có nhiều thứ chúng ta có thể làm với biến đổi. Xoay vòng chỉ là một trong số chúng.
Chức năng xoay di chuyển một phần tử. Cần một đối số:số độ mà chúng ta muốn xiên phần tử. Hãy tiếp tục và áp dụng xoay 35 độ tích cực:
div.rotate {
width: 50px;
height: 50px;
background-color: chocolate;
transform: rotate(35deg);
} Chúng tôi đã xoay hộp của chúng tôi! Chạm vào chính mình ở phía sau.
Khi nào sử dụng hàm xoay () CSS Transformer
Xoay cho phép các ý tưởng giao diện người dùng ưa thích hoặc hình ảnh xoay. Ví dụ, bạn có thể xoay 180 độ một hình ảnh. Nếu bạn cần hình ảnh xoay đó ở một nơi khác, chỉ cần lưu nó và sử dụng nó cho phù hợp.
Một thứ khác bạn có thể xoay là văn bản. Giả sử bạn đang tạo một bố cục bắt chước một tạp chí, bạn thực sự có thể xoay văn bản để thêm điểm nhấn cho các thành phần văn bản.
Và đó không phải là tất cả những gì bạn có thể làm với xoay () . Chức năng xoay cho phép chúng tôi thực hiện một số hoạt ảnh thực sự thú vị !
Hãy tiếp tục và sử dụng công cụ chọn CSS:hover trên div của chúng tôi để thực sự áp dụng hiệu ứng xoay vòng đẹp mắt:
.rotate:hover {
transform: rotate(35deg);
background-color: deeppink;
} Điều này không thú vị phải không? &# 128526;
Hộp của chúng ta sẽ xoay khi chúng ta di chuột qua nó. Chúng tôi sử dụng thuộc tính CSS background-color để thay đổi màu của hộp khi chúng tôi di chuột qua nó.
Kết luận
Hàm xoay CSS làm cho một phần tử web xuất hiện ở một góc. Hàm này chấp nhận một đối số:số độ của phần tử sẽ được xoay. Bạn có thể chỉ định giá trị độ dương hoặc âm.
Xoay các phần tử cho phép bạn làm cho các trang web của mình đẹp hơn về mặt thẩm mỹ. Ví dụ:bạn có thể áp dụng cách xoay hộp khi người dùng di chuột qua hộp đó bằng con trỏ của họ. Hoặc bạn có thể quyết định xoay một liên kết khi người dùng di chuột qua liên kết đó. Cách bạn sử dụng kỹ năng này tùy thuộc vào bạn!
Bạn có muốn tìm hiểu thêm về CSS? Hãy xem hướng dẫn Cách học CSS đầy đủ của chúng tôi để có lời khuyên và hướng dẫn của chuyên gia về các tài nguyên học tập hàng đầu.