আমি কীভাবে একটি HTML <ডিভি> 90 ডিগ্রি ঘোরান?

Question

আমার একটি রয়েছে <div>যা আমি 90 ডিগ্রি ঘোরানো চাই:

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

কিভাবে আমি এটি করতে পারব?

Comments

গুগল আপনার জন্য কি করতে পারে :): স্ট্যাকওভারফ্লো

— বেঞ্জ

একটি উদাহরণ: w3schools.com/cssref/css3_pr_transform.asp

— স্পেশালস্কোপ

Answer 1

এটি অর্জনের জন্য আপনার সিএসএস দরকার, যেমন:

#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-উপসর্গ হয় আর প্রাসঙ্গিক এবং সম্ভবত প্রয়োজন হয় না । আইই 9 প্রয়োজন -ms-এবং সাফারি এবং অ্যান্ড্রয়েড ব্রাউজারের প্রয়োজন require-webkit-

---

আপডেট 2018: বিক্রেতার উপসর্গগুলির আর প্রয়োজন নেই। শুধুমাত্র transformযথেষ্ট। (ধন্যবাদ @ রিনোগো)

Comments

এটি পরিবর্তিত হচ্ছে না আমি এটি সিএসএস ফাইলে ব্যবহার করছি

— user1808433

@ ব্যবহারকারী1808433 কারণ 90 ডিগ্রি ঘোরার সাথে বর্গটি দেখতে একই রকম হবে :-), এখানে একটি ডেমো রয়েছে: jsbin.com/opamiq/1

— ডিজিয়াড বোরোয়

এছাড়াও, নিশ্চিত হয়ে নিন যে এটি একটি ব্লক

— ch

2018 আপডেট: কেবল transform: rotate(90deg);প্রয়োজন

— রিনোগো

Answer 2

আপনার সিএসএসে নিম্নলিখিত ব্যবহার করুন

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>

"রান কোড স্নিপেট" ক্লিক করুন, তারপরে রূপান্তরটির প্রভাব দেখতে বাক্সের উপরে ঘুরে দেখুন।

বাস্তবিকভাবে, অন্য কোনও পূর্বনির্ধারিত এন্ট্রি প্রয়োজন হয় না ries দেখুন আমি ব্যবহার করতে পারেন সিএসএস 3 বদলে দেয়?

Comments

বিদ্যমান উত্তরের অধীনে মন্তব্য হিসাবে এটি আরও ভাল হবে ... বা বিদ্যমান উত্তরে এটি সম্পাদনা করে উল্লেখ করুন যে অন্যান্য উপসর্গগুলি সম্ভবত প্রয়োজন নেই। প্রায় 3 টি একই উত্তর থাকা অসফল।

— মিস্টারমনসাম

@ জাজ কীভাবে বাক্সটি না খুলে আমি কীভাবে রাখব?

— হায়ায়ুশ

@ আইয়ুশর্মা: জেএস ব্যবহার করুন বা সিএসএস হোভারের অবস্থাটিকে "অস্থিরতা" করার পরে দেখুন দেখুন : একটি হ্যাক প্রস্তাবিত আছে #element{transition: 9999999s}(যা রূপান্তরটি স্বাভাবিক অবস্থায় ফিরিয়ে আনবে চিরকাল ধরে) এবং #element:hover{transition: .3s}(তবে আপনি দীর্ঘস্থায়ীভাবে আবর্তনটি নিতে চান)।

— জাজ

Answer 4

আপনি CSS3 সম্পত্তি ব্যবহার করতে পারেন রাইটিং-মোড রাইটিং-মোড : টিবি-আরএল

CSS-ট্রিকস

মোজিলা

Answer 5

আমরা সিএসএসে একটি নির্দিষ্ট ট্যাগে নিম্নলিখিতগুলি যুক্ত করতে পারি:

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

অর্ধেক ঘূর্ণন পরিবর্তন ক্ষেত্রে 90করতে 45।