Hướng dẫn how do you rotate a string in css? - làm thế nào để bạn xoay một chuỗi trong css?

Xem thêm

Hàm rotate() CSS xác định một phép biến đổi xoay một phần tử xung quanh một điểm cố định trên mặt phẳng 2D, mà không làm biến dạng nó. Kết quả của nó là một loại dữ liệu .transform origin. This defaults to the center of the element, but you can set your own custom transform origin using the transform-origin property.

Thử nó

Điểm cố định mà phần tử xoay xung quanh - được đề cập ở trên - còn được gọi là nguồn gốc biến đổi. Điều này mặc định là trung tâm của phần tử, nhưng bạn có thể đặt nguồn gốc biến đổi tùy chỉnh của riêng mình bằng thuộc tính transform-origin.

Cú pháp

Lượng xoay được tạo bởi rotate() được chỉ định bởi một ____10. Nếu tích cực, chuyển động sẽ theo chiều kim đồng hồ; Nếu tiêu cực, nó sẽ là ngược chiều kim đồng hồ. Một vòng quay bằng 180 ° được gọi là phản xạ điểm.

Giá trị

Ví dụ

Ví dụ cơ bản

HTML

<div>Normaldiv>
<div class="rotated">Rotateddiv>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
  background-color: pink;
}

Kết quả

Kết hợp xoay vòng với một phép biến đổi khác

Nếu bạn muốn áp dụng nhiều biến đổi cho một yếu tố, hãy cẩn thận về thứ tự bạn chỉ định các phép biến đổi của mình. Ví dụ: nếu bạn xoay trước khi dịch, bản dịch sẽ dọc theo trục xoay mới!

HTML

<div>Normaldiv>
<div class="rotate">Rotateddiv>
<div class="rotate-translate">Rotated + Translateddiv>
<div class="translate-rotate">Translated + Rotateddiv>

CSS

div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}

.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}

.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}

.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}

Kết quả

Tính tương thích của trình duyệt web