Bagaimana saya bisa memutar HTML <div> 90 derajat?

Jawaban:

465

Anda perlu CSS untuk mencapai ini, misalnya:

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

Demo:

Tampilkan cuplikan kode

(Ada 45 derajat rotasi dalam demo, sehingga Anda dapat melihat efeknya)

Catatan: The -o-dan -moz-awalan tidak lagi relevan dan mungkin tidak diperlukan . IE9 membutuhkan -ms-dan Safari dan browser Android membutuhkan-webkit-

Pembaruan 2018: Awalan vendor tidak diperlukan lagi. Hanya transformcukup. (terima kasih @rinogo)

Dziad Borowy
sumber
itu tidak mengubah saya menggunakan ini dalam file css
user1808433
9
@ user1808433 karena dengan rotasi 90deg persegi akan terlihat sama :-), ini demo: jsbin.com/opamiq/1
Dziad Borowy
7
juga, pastikan itu adalah blok
chovy
3
Pembaruan 2018: Hanya transform: rotate(90deg);diperlukan
rinogo
28

Gunakan mengikuti di CSS Anda 

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);
}
عثمان غني
sumber
37
Sama seperti saran untuk semua pembaca di masa mendatang: selalu tempatkan aturan yang diawali sebelum definisi standar. Dalam hal ini, semua aturan yang diawali browser harus berada di depan transform: rotate(90deg);aturan. Alasannya adalah bahwa biasanya, Anda ingin standar diutamakan, dan dalam CSS definisi terakhir selalu menang.
Jesse
14

Gunakan 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>
Luaskan cuplikan

Klik "Jalankan cuplikan kode", lalu arahkan kursor ke kotak untuk melihat efek transformasi.

Secara realistis, tidak ada entri awalan lain yang diperlukan. Lihat Bisakah saya menggunakan Transformasi CSS3?

Zaz
sumber
1
Ini akan lebih baik sebagai komentar di bawah jawaban yang ada ... atau melakukan edit ke jawaban yang ada yang menyatakan bahwa awalan lain mungkin tidak diperlukan. Memiliki 3 jawaban yang persis sama persis tidak membantu.
misterManSam
@Zaz bagaimana cara menjaga kotak diputar bahkan setelah saya membuka tutup?
heyayush
@ayushsharma: Gunakan JS atau lihat Make CSS Hover state tetap ada setelah “unhovering” : Satu retasan menyarankan ada #element{transition: 9999999s}(yang membuat transisi kembali menjadi normal selamanya) dan #element:hover{transition: .3s}(atau seberapa lama Anda ingin rotasi dilakukan).
Zaz
4

Anda dapat menggunakan mode penulisan properti CSS3 mode penulisan: tb-rl

css-trik

mozilla

Ashraf
sumber
0

Kami dapat menambahkan yang berikut ke tag tertentu di CSS:

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

Dalam hal perubahan setengah rotasi 90menjadi 45.

subindas pm
sumber