Bagaimana saya bisa memutar HTML <div> 90 derajat?

245

Saya punya <div>yang ingin saya putar 90 derajat:

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

Bagaimana saya bisa melakukan ini?

html css

— pengguna1808433
sumber

6

Apa yang bisa dilakukan Google untuk Anda :): stackoverflow.com/questions/2449668/…

— Benz

Contoh: w3schools.com/cssref/css3_pr_transform.asp

— specialscope

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

#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>

Luaskan cuplikan

(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