Bir HTML'yi <div> 90 derece nasıl döndürebilirim?

245

<div>90 derece döndürmek istediğim bir şey var :

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

Bunu nasıl yapabilirim?

html css

— user1808433
kaynak

6

Google sizin için neler yapabilir :): stackoverflow.com/questions/2449668/…

— Benz

Bir örnek: w3schools.com/cssref/css3_pr_transform.asp

— specialscope

465

Bunu başarmak için CSS'ye ihtiyacınız var, örneğin:

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

Demo:

Kod snippet'ini göster

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

Snippet'i genişlet

(Demoda 45 derece dönüş var, böylece etkisini görebilirsiniz)

Not:-o- ve -moz-ön ekler vardır artık alakalı ve muhtemelen gerekli değildir . IE9 gerektirir -ms-ve Safari ve Android tarayıcı gerektirir-webkit-

2018 Güncellemesi: Artık satıcı öneklerine gerek yok. Sadece transformyeterlidir. (teşekkürler @rinogo)

— Dziad Borowy
kaynak

değişmiyor bu css dosyasında kullanıyorum

— user1808433

9

@ user1808433 çünkü 90 derece döndürme ile kare aynı görünecektir :-), işte bir demo: jsbin.com/opamiq/1

— Dziad Borowy

7

Ayrıca, emin olun bir blok

— chovy

3

2018 güncellemesi: Sadece transform: rotate(90deg);gerekli

— rinogo

28

CSS'nizde aşağıdakileri kullanı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);
}

— عثمان غني
kaynak

37

Gelecekteki tüm okuyuculara bir öneri olarak: her zaman ön ekli kuralları standart tanımından önce yerleştirin. Bu durumda, tarayıcı ön ekli tüm kurallar transform: rotate(90deg);kuraldan önce olmalıdır . Bunun nedeni, tipik olarak standartların öncelik kazanmasını istemenizdir ve CSS'de son tanım her zaman kazanır.

— Jesse

14

Kullanım 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>

Snippet'i genişlet

"Kod snippet'ini çalıştır" ı tıklayın, ardından dönüşümün etkisini görmek için imleci kutunun üzerine getirin.

Gerçekçi olarak, başka ön ek girişlerine gerek yoktur. Bkz. CSS3 Dönüşümlerini Kullanabilir miyim?

— Zaz
kaynak

1

Bu, mevcut bir cevap altındaki yorum olarak daha iyi olur veya mevcut bir cevapta diğer öneklerin muhtemelen gerekli olmadığını belirten bir düzenleme yapar. Hemen hemen aynı cevaplara 3 sahip olmak yararsızdır.

— misterManSam

@Zaz, açıldıktan sonra bile kutuyu nasıl döndürebilirim?

— heyayush

@ayushsharma: JS'yi kullanın veya “gezinmeden” sonra CSS Hover durumunu devam ettirme konusuna bakın : Bir bilgisayar korsanlığı önerildi #element{transition: 9999999s}(bu, normale dönmeyi sonsuza kadar geri alır) ve #element:hover{transition: .3s}(veya rotasyonun almasını istediğiniz uzun süre).

— Zaz

4

css3 özelliği yazma modu yazma modunu kullanabilirsiniz: tb-rl

css-hileler

mozilla

— Ashraf
kaynak

0

CSS'deki belirli bir etikete aşağıdakileri ekleyebiliriz:

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

Yarım rotasyon değişikliği durumunda 90etmek 45.

— subindas pm
kaynak