Hướng dẫn how to rotate text 90 degrees in html - cách xoay văn bản 90 độ trong html

Nếu những gì bạn đang tìm kiếm là một cách để đặt loại theo chiều dọc, thì bạn đặt cược tốt nhất có lẽ là CSS


1.

Nếu bạn chỉ đang cố gắng biến một số văn bản, bạn có thể xoay toàn bộ các yếu tố như thế này, nó xoay nó 90 độ ngược chiều kim đồng hồ:

.rotate {

  transform: rotate(-90deg);


  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(-90deg);

  /* Firefox */
  -moz-transform: rotate(-90deg);

  /* IE */
  -ms-transform: rotate(-90deg);

  /* Opera */
  -o-transform: rotate(-90deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

Thuộc tính xoay của bộ lọc cơ bản của Internet Explorer có thể chấp nhận một trong bốn giá trị: 0, 1, 2 hoặc 3 sẽ xoay phần tử 0, 90, 180 hoặc 270 độ tương ứng.


Cũng xem bài viết trên blog này về các tiêu đề sang một bên.

Xem các tiêu đề đi ngang của Chris Coyier (@Chriscoyier) trên Codepen.
Sideways Headers by Chris Coyier (@chriscoyier)
on CodePen.

Xem vòng xoay tiêu đề sang một bên của Graham Clark (@cheesetoast) trên Codepen.
Sideways Header Rotation by Graham Clark (@Cheesetoast)
on CodePen.

Thông tin về các Tác giả


Tôi là một người đam mê Linux, tôi thích đọc mọi blog Linux trên Internet. Tôi có bằng thạc sĩ về khoa học máy tính và đam mê học tập và giảng dạy.

My paragraph

Làm cách nào để xoay văn bản 90 độ mà không sử dụng bảng kiểu? Tôi đã đặt hướng dẫn sau trong khu vực tiêu đề của trang:

Sau đó, tôi đặt những điều sau đây xung quanh đoạn văn trong câu hỏi.Nov 13, 2017 at 9:36

1

Nhưng nó không hoạt động và do đó câu hỏi của tôi.

#rotate-text {
   width: 25px;
   transform: rotate(90deg);
}

My paragraph

Đã hỏi ngày 13 tháng 11 năm 2017 lúc 9:36Nov 13, 2017 at 9:44

Hướng dẫn how to rotate text 90 degrees in html - cách xoay văn bản 90 độ trong html

Đây là một ví dụ hình ảnh nhỏ:sjahan

Đã trả lời ngày 13 tháng 11 năm 2017 lúc 9:443 gold badges18 silver badges40 bronze badges

2

Sjahansjahan

writing-mode: vertical-rl

5.5143 Huy hiệu vàng18 Huy hiệu bạc40 Huy hiệu đồng

writing-mode: vertical-lr

Bạn có thể sử dụng thuộc tính CSS


1

transform: rotate(90deg)

hoặcJan 29, 2021 at 8:44

Hướng dẫn how to rotate text 90 degrees in html - cách xoay văn bản 90 độ trong html

Freestyle09Freestyle09Freestyle09

4.0716 Huy hiệu vàng48 Huy hiệu bạc74 Huy hiệu đồng6 gold badges48 silver badges74 bronze badges

1

Bạn sử dụng


3 trong mã HTML, vì vậy bạn phải sử dụng

4 trong CSS.

Change:

div.rotate-text {

To:

div#rotate-text {

Đã trả lời ngày 13 tháng 11 năm 2017 lúc 9:43Nov 13, 2017 at 9:43

Hướng dẫn how to rotate text 90 degrees in html - cách xoay văn bản 90 độ trong html

EhsanehsanEhsan

12.4K3 Huy hiệu vàng24 Huy hiệu bạc44 Huy hiệu đồng3 gold badges24 silver badges44 bronze badges

Chế độ viết tốt hơn cho nội dung văn bản, với biến đổi: ROTATE () Bộ chứa văn bản vẫn ở lại với kích thước ngang.


0

Đã trả lời ngày 25 tháng 8 năm 2021 lúc 13:33Aug 25, 2021 at 13:33

dvdmndvdmndvdmn

6.2067 Huy hiệu vàng42 Huy hiệu bạc52 Huy hiệu Đồng7 gold badges42 silver badges52 bronze badges

Thông thường, khi văn bản được thêm vào một trang web ở vị trí ngang trên màn hình hiển thị. Tuy nhiên, CSS cung cấp nhiều cách khác nhau để thay đổi vị trí của văn bản theo sở thích. Chúng ta cũng có thể thay đổi hướng và góc của văn bản bằng các thuộc tính CSS. Cụ thể hơn, văn bản có thể được xoay ở 90 độ.

Hướng dẫn này sẽ dạy bạn cách xoay văn bản ở 90 độ. Vậy hãy bắt đầu!

Để xoay văn bản ở 90 độ trong CSS, thuộc tính biến đổi của Cameron được sử dụng. Trước khi sử dụng nó, trước tiên, chúng tôi sẽ thảo luận về tài sản CSS này để hiểu rõ hơn.transform” property is used. Before using it, firstly, we will discuss this CSS property for a better understanding.

Thuộc tính biến đổi của người Viking trong CSS là gì?

Thuộc tính biến đổi của người Viking được sử dụng cho phép biến đổi 2D và 3D của bất kỳ yếu tố nào. Thuộc tính này cho phép một phần tử xoay, di chuyển, sai lệch và tỷ lệ. Bạn cũng có thể sử dụng thuộc tính này để xoay văn bản được thêm vào ở 90 độ.transform” property is used for the 2D and 3D transformation of any element. This property allows an element to rotate, move, skew and scale. You can also utilize this property for rotating the added text at 90 degrees.

Cú pháp

Cú pháp của thuộc tính của Transform Transform là:transform” property is:

Biến đổi: Không có | Đáng dụng biến đổi: none|transform-functions

Mô tả về các giá trị trên là:

  • Không có: Nó được sử dụng để không đặt chuyển đổi trên bất kỳ yếu tố nào. It is used to set no transformation on any element.
  • Các hàm biến đổi: Nó có thể được sử dụng để chỉ định các hàm khác nhau, chẳng hạn như rotate (), scale (), di chuyển () và độ lệch (). It can be used to specify different functions, such as rotate(), scale(), move() and skew().

Hãy để di chuyển đến ví dụ thực tế để sử dụng thuộc tính chuyển đổi cho văn bản xoay trong 90 độ.

Ví dụ: Xoay văn bản 90 độ trong CSS

Trong HTML, chúng tôi sẽ thêm một tiêu đề và đoạn văn bằng cách sử dụng và thẻ, tương ứng:

<body>

Linuxhinth2>Linuxhint</h2>

xoay văn bản trong 90 độp> rotation of text in 90 degree</p>

</body>

Linuxhint

Hướng dẫn how to rotate text 90 degrees in html - cách xoay văn bản 90 độ trong html

xoay văn bản trong 90 độtransform” property to it. To do so, use “p” to access the paragraph created in the HTML file. After that, use the transform property and set the angle of rotation as “90deg” in the rotate() function. Next, use the “transform-origin” property and set its value to ”left” to rotate the text in the clockwise direction. Moreover, we set the margin-left “70px” to give the margin from the left side of the paragraph, and for styling, set font-weight and font-size as “bolder” and “x-large”, respectively:

p{{

transform:rotate(90deg);:rotate(90deg);

transform-origin:left;:left;

margin-left:70px;:70px;

font-weight:bolder;:bolder;

font-size:x-large;:x-large;

Điều này sẽ hiển thị đầu ra sau:

Bây giờ, chúng tôi sẽ chuyển đến CSS và áp dụng thuộc tính Transform Transform cho nó. Để làm như vậy, hãy sử dụng P P Pi để truy cập đoạn văn được tạo trong tệp HTML. Sau đó, sử dụng thuộc tính biến đổi và đặt góc quay làm 90deg 90deg trong hàm xoay (). Tiếp theo, sử dụng thuộc tính của bộ biến đổi có nghĩa là và đặt giá trị của nó thành phần mềm bên trái để xoay văn bản theo hướng theo chiều kim đồng hồ. Hơn nữa, chúng tôi đã đặt biên độ bên trái 70px, để cung cấp lề từ phía bên trái của đoạn văn, và để tạo kiểu, đặt trọng lượng phông chữ và kích thước phông chữ như một trò chơi táo bạo hơn và X-Large, tương ứng::: Here, the “transform-origin” property is used to set the x-axis and y-axis of rotation.

}

Hướng dẫn how to rotate text 90 degrees in html - cách xoay văn bản 90 độ trong html

LƯU Ý: Ở đây, thuộc tính có thể biến đổi của người dùng được sử dụng để đặt trục x và trục y của vòng quay.transform” property, our text is successfully rotated at 90 degrees.

Sau khi thực hiện mã trên, hãy truy cập HTML và thực hiện nó để xem kết quả sau:

Có thể quan sát thấy rằng sử dụng thuộc tính của Transform Transform, văn bản của chúng tôi được xoay thành công ở 90 độ.transform” property is used. The angle of the rotation is set according to the specified degree value. Using this, you can also define different angles of the text according to your choice. In this article, we have explained how to rotate text 90 degrees using the transform property with the help of an example.

Sự kết luận

Hướng dẫn how to rotate text 90 degrees in html - cách xoay văn bản 90 độ trong html

Để xoay văn bản ở 90 độ, thuộc tính biến đổi trên mạng được sử dụng. Góc của vòng quay được đặt theo giá trị độ được chỉ định. Sử dụng điều này, bạn cũng có thể xác định các góc khác nhau của văn bản theo lựa chọn của bạn. Trong bài viết này, chúng tôi đã giải thích cách xoay văn bản 90 độ bằng cách sử dụng thuộc tính chuyển đổi với sự trợ giúp của một ví dụ.