CSS3 রূপান্তর কাজ করছে না

Question

আমি আমার মেনু আইটেমগুলিকে 10 ডিগ্রি ঘোরানোর মাধ্যমে রুপান্তর করার চেষ্টা করছি। আমার সিএসএস ফায়ারফক্সে কাজ করে তবে আমি ক্রোম এবং সাফারিতে প্রভাবটি প্রতিলিপি করতে ব্যর্থ হয়েছি। আমি জানি আইই এই সিএসএস 3 সম্পত্তি সমর্থন করে না তাই এটি কোনও সমস্যা নয়।

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

li a {
   -webkit-transform:rotate(10deg);
   -moz-transform:rotate(10deg);
   -o-transform:rotate(10deg); 
}

কেউ দয়া করে বলতে পারেন যে আমি কোথায় ভুল করছি?

ধন্যবাদ।

Comments

এফওয়াইআই, আইই এই সিএসএস 3 সম্পত্তি সমর্থন করে, আপনার কেবল একটি উপসর্গ প্রয়োজন:-ms-transform:rotate(10deg);

— জোশুয়া পিন্টার

CSS ট্রান্সফর্মের

— মেমস

যেহেতু কেউই এখনও এটি উল্লেখ করেনি, যেহেতু ২০১ 2016 সাল এখন আপনি সিএসএস নিয়মের (উদাহরণস্বরূপ transform: rotate(10deg);) সংস্করণটির অপরিবর্তিত সংস্করণটি সমর্থন করার জন্য বেছে নিন এমন কোনও প্রাক-সংস্করণের নীচে রেখেছেন তা নিশ্চিত করুন ।

— ম্যাক্সিমিলিয়ান লাউমিস্টার

Answer 1

আপনার এইচটিএমএল / সিএসএসের বাকি অংশটি না দেখে এটি কেবল শিক্ষিত অনুমান:

আপনি আবেদন করেছেন display: blockবা display: inline-blockকরতে li a? যদি না হয়, চেষ্টা করুন।

অন্যথায়, liপরিবর্তে CSS3 রূপান্তর নিয়ম প্রয়োগ করার চেষ্টা করুন ।

Comments

আমি তোমায় ভালোবাসি! display: inline-blockসাহায্য করেছিল।

— বাগের বানি

একটি ব্যাখ্যা সহায়ক হবে :)

— স্কিট্রনবয়

Answer 2

ওয়েবকিট-ভিত্তিক ব্রাউজারগুলিতে (সাফারি এবং ক্রোম) -webkit-transform ইনলাইন উপাদানগুলিতে উপেক্ষা করা হয়। । সেট display: inline-block;থেকে এটি কাজ করা । প্রদর্শনের / পরীক্ষার উদ্দেশ্যে, আপনি একটি নেতিবাচক কোণ ব্যবহার করতে চাইতে পারেন বা transformation-originটেক্সটটি দৃশ্যমান অঞ্চল থেকে ঘোরানো হবে।

Comments

আমার জন্য নিখুঁতভাবে কাজ করেছেন, আপনাকে ধন্যবাদ! আমি একটি কপিলিফ্ট প্রতীক তৈরি করতে <span> & অনুলিপি </ span> এ এটি ব্যবহার করেছি।

— এলিজাবেথ

@ ইলিশাবেথ এটি একটি দুর্দান্ত অ্যাপ্লিকেশন। নোট করুন যে সত্তা রেফারেন্সগুলিকে (যেমন হিসাবে <span>&copy;</span>) একটি আধা-কোলন দ্বারা সমাপ্ত করা দরকার , যদিও বেশিরভাগ ব্রাউজারগুলি উভয় উপায়ে রেন্ডার করে।

— ফিহাগ

অন্য দ্রষ্টব্য: আপনি যদি কোনও ইন্টারঅ্যাকশন রাষ্ট্রের জন্য রূপান্তর প্রয়োগ করছেন (উদাহরণস্বরূপ, :hoverবা :active) আপনাকে inline-blockতার ডিফল্ট অবস্থায় যেমন উপাদানটিতে প্রয়োগ করতে হবে, উদাহরণস্বরূপ a { display: inline-block; } a:active { transform: translateY(0.125em); },। inline-blockইন্টারঅ্যাকশন স্থিতিতে একা প্রয়োগ করা কার্যকর বলে মনে হচ্ছে না। কমপক্ষে ক্রোমে - এটি ফায়ারফক্সে দুর্দান্ত কাজ করে।

— পল 24'13

-webkit-transformইনলাইন আইটেমগুলিতে কাজ করে না এমন বিষয়টি নির্দেশ করার জন্য ধন্যবাদ । আগে এই উপর আটকে ছিল।

— pbojinov 12'14

@ ফিহাগ দুর্দান্ত পয়েন্ট, আপনি আমাকে কিছু বড় চুল টানিয়েছেন! অ্যানিমেশন চলার পরে এটি আপনার উপাদানগুলি অদৃশ্য হয়ে যেতে পারে তা লক্ষণীয়।

— 12:30 এ টেক্সলেট

Answer 3

_{যেহেতু কেউ প্রাসঙ্গিক ডকুমেন্টেশন উল্লেখ করেনি:}

সিএসএস রূপান্তর মডিউল স্তর 1 - পরিভাষা - রূপান্তরযোগ্য উপাদান

একটি রূপান্তরযোগ্য উপাদান এই বিভাগগুলির মধ্যে একটিতে একটি উপাদান:

• এমন একটি উপাদান যার লেআউটটি সিএসএস বক্স মডেল দ্বারা নিয়ন্ত্রিত হয় যা হয় ব্লক-স্তর বা পরমাণু ইনলাইন-স্তর উপাদান , বা যার প্রদর্শন সম্পত্তি টেবিল-সারি, টেবিল-সারি-গোষ্ঠী, টেবিল-শিরোনাম-গোষ্ঠী, টেবিল-পাদচরণ -গ্রুপ, টেবিল-সেল, বা টেবিল-ক্যাপশন
• এসভিজি নেমস্পেসের একটি উপাদান এবং সিএসএস বক্স মডেল দ্বারা নিয়ন্ত্রিত নয় যার বৈশিষ্ট্যগুলি ট্রান্সফর্ম, 'প্যাটার্ন ট্রান্সফর্ম' বা গ্রেডিয়েন্ট ট্রান্সফর্ম রয়েছে।

আপনার ক্ষেত্রে, <a>উপাদানগুলি inlineডিফল্টরূপে হয়।

displayসম্পত্তির মান পরিবর্তন করে inline-blockউপাদানগুলিকে পারমাণবিক ইনলাইন-স্তরের উপাদান হিসাবে রেন্ডার করে এবং সুতরাং উপাদানগুলি সংজ্ঞা দ্বারা "রূপান্তরযোগ্য" হয়ে ওঠে ।

li a {
   display: inline-block;
   -webkit-transform: rotate(10deg);
   -moz-transform: rotate(10deg);
   -o-transform: rotate(10deg); 
   transform: rotate(10deg);
}

উপরে উল্লিখিত হিসাবে, এটি কেবল -webkitভিত্তিক ব্রাউজারগুলিতেই প্রযোজ্য বলে মনে হয় যেহেতু এটি আই / এফএফ নির্বিশেষে কাজ করে।

Answer 4

আপনি কি কেবলমাত্র লিঙ্কগুলি ঘোরানোর চেষ্টা করছেন? কারণ এলআই ট্যাগগুলিতে এটি করা ভাল কাজ করে বলে মনে হচ্ছে।

স্নুক অনুসারে রূপান্তরগুলির জন্য প্রভাবিত উপাদানগুলিকে ব্লক করা দরকার। ফিল্টারগুলি ব্যবহার করে IE এর জন্য এই কাজটি করার জন্য তিনি কিছু কোড পেয়েছেন, যদি আপনি এটি যুক্ত করতে আগ্রহী হন (যদিও মানগুলির মধ্যে কিছু সীমাবদ্ধতা উপস্থিত রয়েছে)।

Answer 5

-webkit-transform আর দরকার নেই

এমএস ইতিমধ্যে রোটেশন সমর্থন করে ( -ms-transform: rotate(-10deg);)

এটা চেষ্টা কর:

li a {
   ...

    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -sand-transform: rotate(10deg);
    display: block;
    position: fixed;
    }

Comments

আজ আমার পরীক্ষার সময়, আমি লক্ষ্য করেছি যে -webkit-transformক্রোমের প্রকৃতপক্ষে আর দরকার নেই। যাইহোক, এটা এখনও সাফারি 8. মধ্যে প্রয়োজন ছিল

— জন Slegers

-স্যান্ড-ট্রান্সফর্ম কি জন্য? একটি সংক্ষিপ্ত গুগল অনুসন্ধান কিছুই না।

— পিট

গুগল 'সিএসএস স্যান্ডপেপার' যা প্রশ্নের সাথে প্রাসঙ্গিক এবং বিষয়গুলি আরও সহজ করে তুলতে পারে। এটি এমন একটি হ্যাক যা IE এর পুরানো সংস্করণগুলির জন্য স্ট্যান্ডার্ড সিএসএস রূপান্তরের জন্য সমর্থন কার্যকর করে

— পেড্রো জাস্টো