Làm cách nào tôi có thể xoay HTML <div> 90 độ?

245

Tôi có một <div>cái mà tôi muốn xoay 90 độ:

<div id="container_2"></div>

Tôi có thể làm cái này như thế nào?

html css

— người dùng1808433
nguồn

6

Google có thể làm gì cho bạn :): stackoverflow.com/questions/2449668/ cấp

— Benz

Một ví dụ: w3schools.com/cssref/css3_pr_transform.asp

— specialscope

465

Bạn cần CSS để đạt được điều này, ví dụ:

#container_2 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

Bản giới thiệu:

Hiển thị đoạn mã

#container_2 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

<div id="container_2"></div>

Mở rộng đoạn trích

(Có bản quay 45 độ trong bản demo, vì vậy bạn có thể thấy hiệu ứng)

Lưu ý: Các -o-và -moz-tiền tố là không còn phù hợp và có lẽ không cần thiết . IE9 yêu cầu -ms-và Safari và trình duyệt Android yêu cầu-webkit-

Cập nhật 2018: Không cần tiền tố nhà cung cấp nữa. Chỉ transformlà đủ. (cảm ơn @rinogo)

— Boriay Borowy
nguồn

nó không thay đổi tôi đang sử dụng cái này trong tập tin css

— user1808433

9

@ user1808433 vì với 90deg xoay, hình vuông sẽ trông giống nhau :-), đây là bản demo: jsbin.com/opamiq/1

— Dziad Borowy

7

đồng thời, đảm bảo khối của nó

— chovy

3

Cập nhật 2018: Chỉ transform: rotate(90deg);cần thiết

— rinogo

28

Sử dụng theo sau trong CSS của bạn

div {
    -webkit-transform: rotate(90deg); /* Safari and Chrome */
    -moz-transform: rotate(90deg);   /* Firefox */
    -ms-transform: rotate(90deg);   /* IE 9 */
    -o-transform: rotate(90deg);   /* Opera */
    transform: rotate(90deg);
}

— عثمان ني
nguồn

37

Cũng như một gợi ý cho tất cả các độc giả tương lai: luôn đặt các quy tắc tiền tố trước định nghĩa tiêu chuẩn. Trong trường hợp này, tất cả các quy tắc có tiền tố trình duyệt nên trước transform: rotate(90deg);quy tắc. Lý do sẽ là thông thường, bạn muốn các tiêu chuẩn được ưu tiên và trong CSS, định nghĩa cuối cùng luôn luôn thắng.

— Jesse

14

Sử dụng transform: rotate(90deg):

#container_2 {
    border: 1px solid;
    padding: .5em;
    width: 5em;
    height: 5em;
    transition: .3s all;  /* rotate gradually instead of instantly */
}

#container_2:hover {
    -webkit-transform: rotate(90deg);  /* to support Safari and Android browser */
    -ms-transform: rotate(90deg);      /* to support IE 9 */
    transform: rotate(90deg);
}

<div id="container_2">This box should be rotated 90&deg; on hover.</div>

Mở rộng đoạn trích

Nhấp vào "Chạy đoạn mã", sau đó di chuột qua hộp để xem hiệu ứng của biến đổi.

Trên thực tế, không có mục nhập tiền tố khác là cần thiết. Xem Tôi có thể sử dụng Chuyển đổi CSS3 không?

— Zaz
nguồn

1

Điều này sẽ tốt hơn khi nhận xét theo câu trả lời hiện có ... hoặc chỉnh sửa câu trả lời hiện có cho biết các tiền tố khác có thể không cần thiết. Có 3 câu trả lời khá chính xác là không có ích.

— misterManSam

@Zaz làm thế nào để giữ hộp xoay ngay cả sau khi tôi mở?

— heyayush

@ayushsharma: Sử dụng JS hoặc xem Make CSS bang Hover còn lại sau khi “unhovering” : Một Hack gợi ý có #element{transition: 9999999s}(mà làm cho mặt sau chuyển đổi sang mất bình thường vĩnh viễn) và #element:hover{transition: .3s}(hoặc lâu dài tuy nhiên bạn muốn quay đi).

— Zaz

4

bạn có thể sử dụng chế độ ghi thuộc tính css3 chế độ viết chế độ: tb-rl

thủ thuật

mozilla

— Ashraf
nguồn

0

Chúng tôi có thể thêm các mục sau vào một thẻ cụ thể trong CSS:

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);

Trong trường hợp thay đổi một nửa vòng quay 90đến 45.

— chiều tối
nguồn