मैं एक HTML <div> 90 डिग्री कैसे घुमा सकता हूं?

Question

मेरे पास एक <div>90 डिग्री घूमने की इच्छा है:

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

मैं यह कैसे कर सकता हूँ?

Comments

Google आपके लिए क्या कर सकता है :): stackoverflow.com/questions/2449668/…

— बेंज

एक उदाहरण: w3schools.com/cssref/css3_pr_transform.asp

— specialscope

Answer 1

इसे प्राप्त करने के लिए आपको CSS की आवश्यकता है, जैसे:

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

डेमो:

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

(डेमो में 45 डिग्री रोटेशन है, जिससे आप प्रभाव देख सकते हैं)

नोट:-o- और -moz-उपसर्गों हैं अब प्रासंगिक नहीं है और शायद की आवश्यकता नहीं । IE9 की आवश्यकता होती है -ms-और सफारी और एंड्रॉइड ब्राउज़र की आवश्यकता होती है-webkit-

---

अद्यतन २०१end: विक्रेता उपसर्गों की अब आवश्यकता नहीं है। केवल transformपर्याप्त है। (साभार @rinogo)

Comments

यह नहीं बदल रहा है मैं इसे css फ़ाइल में उपयोग कर रहा हूं

— user1808433

@ user1808433 क्योंकि 90 डीजी रोटेशन के साथ वर्ग समान दिखाई देगा :-), यहाँ एक डेमो है: jsbin.com/opamiq/1

— Dziad Borowy

इसके अलावा, यह सुनिश्चित करें कि इसका ब्लॉक

— chovy

2018 अपडेट: केवल transform: rotate(90deg);जरूरत है

— rinogo

Answer 2

अपने CSS में निम्नलिखित का उपयोग करें

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);
} 

Comments

भविष्य के सभी पाठकों के लिए एक सुझाव के रूप में: हमेशा मानकों की परिभाषा से पहले उपसर्ग नियमों को रखें । इस मामले में, सभी ब्राउज़र-उपसर्ग नियम से पहले होने चाहिए transform: rotate(90deg);। इसका कारण यह होगा कि आम तौर पर, आप चाहते हैं कि मानक पूर्वता ले लें, और सीएसएस में अंतिम परिभाषा हमेशा जीतती है।

— जेसी

Answer 3

उपयोग करें 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>

"रन कोड स्निपेट" पर क्लिक करें, फिर परिवर्तन के प्रभाव को देखने के लिए बॉक्स पर होवर करें।

यथार्थवादी रूप से, किसी अन्य उपसर्ग वाली प्रविष्टियों की आवश्यकता नहीं है। देखें Can मैं उपयोग CSS3 के Transforms?

Comments

यह एक मौजूदा उत्तर के तहत एक टिप्पणी के रूप में बेहतर होगा ... या किसी मौजूदा उत्तर को यह कहते हुए संपादित करें कि अन्य उपसर्गों की आवश्यकता नहीं है। 3 बहुत अधिक होने के बिल्कुल समान उत्तर अनपेक्षित है।

— misterManSam

@Zaz कैसे मैं unhover के बाद भी बॉक्स घुमाएगी रखने के लिए?

— heyayush

@ आयुष धर्म: जेएस का उपयोग करें या "बेहिचक" के बाद सीएसएस होवर राज्य को देखें : एक हैक का सुझाव दिया गया है #element{transition: 9999999s}(जो संक्रमण को हमेशा के लिए वापस ले जाता है) और #element:hover{transition: .3s}(या फिर जब तक आप रोटेशन लेना चाहते हैं)।

— ज़ज़

Answer 4

आप css3 प्रॉपर्टी राइटिंग-मोड राइटिंग-मोड: tb-rl का उपयोग कर सकते हैं

सीएसएस-चाल

mozilla

Answer 5

हम CSS में एक विशेष टैग में निम्नलिखित जोड़ सकते हैं:

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

आधे रोटेशन के मामले में बदल 90जाते हैं 45।