Xoay div 90 độ CSS

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ì tốt nhất bạn nên chọn CSS writing-mode

Nếu bạn chỉ đang cố xoay một số văn bản, bạn có thể xoay toàn bộ phần tử như thế này, xoay 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 BasicImage 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

Rotating an image on a web page is possible using a CSS rotate class, which is added to any

Xoay hình ảnh bằng CSS

Mã CSS cần bao gồm mã chuyển đổi cho từng trình duyệt Internet chính để hình ảnh được xoay trong tất cả các trình duyệt

Dưới đây là một ví dụ về mã CSS để xoay hình ảnh 180 độ

.rotateimg180 {
  -webkit-transform:rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

The CSS code above should be added to a .css stylesheet file linked in your HTML. For example, if your CSS file is named site.css and in the same directory as your HTML file, you can include the following HTML in the element:

Ngoài ra, bạn có thể bao gồm mã CSS nội tuyến, trong thẻ kiểu xuất hiện trước thẻ hình ảnh hoặc trong thuộc tính kiểu của thẻ hình ảnh

Once the CSS code is applied to your .css file, stylesheet, or