সিএসএসে একাধিক রূপান্তর কীভাবে প্রয়োগ করবেন?

Question

সিএসএস ব্যবহার করে আমি কীভাবে একের বেশি আবেদন করতে পারি transform?

উদাহরণ: নিম্নলিখিতটিতে কেবল অনুবাদটি প্রয়োগ করা হয়, ঘূর্ণন নয়।

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}

Answer 1

আপনাকে এগুলি একটি লাইনে রাখতে হবে:

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

যখন আপনার একাধিক ট্রান্সফর্ম নির্দেশিকা রয়েছে, কেবলমাত্র শেষটি প্রয়োগ করা হবে। এটি অন্য কোনও সিএসএস নিয়মের মতো।

---

মনে রাখবেন একাধিক রূপান্তর এক লাইনের নির্দেশাবলী ডান থেকে বামে প্রয়োগ করা হয় ।

এটি: transform: scale(1,1.5) rotate(90deg);
এবং:transform: rotate(90deg) scale(1,1.5);

একই ফলাফল উত্পাদন করবে না :

.orderOne, .orderTwo {
  font-family: sans-serif;
  font-size: 22px;
  color: #000;
  display: inline-block;
}

.orderOne {
  transform: scale(1, 1.5) rotate(90deg);
}

.orderTwo {
  transform: rotate(90deg) scale(1, 1.5);
}

<div class="orderOne">
  A
</div>

<div class="orderTwo">
  A
</div>

Comments

আমি এগুলিকে একাধিক ছায়া দিয়ে সম্পন্ন করার মতো একটি "," দ্বারা আলাদা করার চেষ্টা করেছি, কিন্তু এটি কার্যকর হয়নি। ধন্যবাদ.

— বেন

অন্যের আগে একটি ট্রান্সফর্মেশন প্রয়োগ করা কি সম্ভব ... ঘোরানোর আগে স্কুয়ের মতো আমি যতই কাজ করি না কেন, উপাদানটি প্রথমে ঘোরানো হয় এবং তারপরে স্কিউ করা হয় যার ফলস্বরূপ এমন কিছু ঘটে যা আমি চাই না।

— মুহাম্মদ উমার

এখনই এগুলিকে একাধিক লাইনে বিভক্ত করতে হবে

— aWebDeveloper

রূপান্তর: অনুবাদ (100px, 100px) ঘোরান (45deg) অনুবাদ (100px, 100px) ঘোরান (45deg); সমান রূপান্তর: অনুবাদ করুন (200px, 200px) ঘোরান (90deg), শেষটি যুক্ত করবে

— bigCat

@ জাভ.ওয়েব, আপনি ডান থেকে বামে বোঝাচ্ছেন , সঠিক? কারণ transform: scale(1,1.5) rotate(90deg);, ঘোরারটি স্কেলের আগে ঘটবে।

— জার্গস

Answer 2

আমি এই উত্তরটি যুক্ত করছি কারণ এটি সম্ভবত সহায়ক হওয়ার কারণেই নয় কারণ এটি সত্য।

এক সাথে একাধিক অনুবাদ কীভাবে করা যায় তা ব্যাখ্যা করে বিদ্যমান উত্তরগুলি ব্যবহার করার পাশাপাশি আপনি নিজেও 4x4 ম্যাট্রিক্স তৈরি করতে পারেন

গুগল করার সময় আমি পেয়েছি এমন কয়েকটি এলোমেলো সাইট থেকে আমি নিম্নলিখিত চিত্রটি পেয়েছি যা ঘূর্ণন ম্যাট্রিক্সগুলি দেখায়:

X অক্ষের চারদিকে ঘোরানো:
y অক্ষের
চারপাশে ঘোরানো: z অক্ষের চারদিকে ঘোরানো:

আমি অনুবাদের একটি ভাল উদাহরণ খুঁজে পাইনি, সুতরাং ধরে নিচ্ছি যে আমি এটি সঠিকভাবে মনে করি / বুঝতে পারি, অনুবাদ:

[1 0 0 0]
[0 1 0 0]
[0 0 1 0]
[x y z 1]

আরো দেখুন রূপান্তর উইকিপিডিয়ার নিবন্ধ সেইসাথে Pragamatic সিএসএস 3 টিউটোরিয়াল যা বরং ভাল ব্যাখ্যা করে। আমি খুঁজে পেয়েছি এমন অন্য গাইড যা নির্বিচারে আবর্তিত ম্যাট্রিক্সের ব্যাখ্যা দেয় তা হ'ল ম্যাট্রিক্সে এগন রথের নোট

ম্যাট্রিক্স গুণন অবশ্যই এই 4x4 ম্যাট্রিক্সের মধ্যে কাজ করে, সুতরাং কোনও অনুবাদের পরে কোনও ঘূর্ণন সঞ্চালন করতে আপনি উপযুক্ত ঘূর্ণন ম্যাট্রিক্স তৈরি করেন এবং অনুবাদ ম্যাট্রিক্স দ্বারা গুন করেন।

এটি আপনাকে এটি ঠিকমতো পাওয়ার জন্য আরও কিছুটা স্বাধীনতা দিতে পারে এবং পাঁচ মিনিটের মধ্যে আপনাকে অন্তর্ভুক্ত করে এটি কী করছে তা কারও পক্ষে বোঝা একেবারে সম্পূর্ণ অসম্ভব হয়ে পড়ে।

তবে, আপনি জানেন, এটি কাজ করে।

সম্পাদনা: আমি ঠিক বুঝতে পেরেছি যে আমি সম্ভবত এটির সবচেয়ে গুরুত্বপূর্ণ এবং ব্যবহারিক ব্যবহারের উল্লেখ করতে মিস করেছি, যা জাভাস্ক্রিপ্টের মাধ্যমে ক্রমবর্ধমান জটিল 3 ডি রূপান্তরকরণ তৈরি করা, যেখানে জিনিসগুলি কিছুটা আরও অর্থবোধ তৈরি করবে।

Comments

মাইনস.ইডুতে "র্যান্ডম সাইট" দুর্ভাগ্যক্রমে এখন একটি মৃত লিঙ্ক।

— ম্যাট শ্যাচ

9 এলিমেন্টের লিঙ্কটি যেমন :(

— ম্যাট

@ ম্যাটস্যাচ ওকে, আপাতদৃষ্টিতে আমার জন্য "পরে আজ" মানে "ছয় মাস পরে" তবে কমপক্ষে 9 টি এলিমেন্টের লিঙ্কটি স্থির হয়েছে (অন্য কেউ এলোমেলোভাবে সাইটগুলিকে ওয়েব্যাকের সাথে সংযুক্ত করেছে, এবং আমি তাদের নেতৃত্ব অনুসরণ করেছি।)

— জেফ

আমিও তৈরি এই আপনি তাদের বুঝতে সাহায্য করার জন্য।

— অ্যালেক্স

এটি সত্যই এই বিষয়ের সাথে খাপ

— খায়

Answer 3

আপনি মার্কআপের অতিরিক্ত স্তর ব্যবহার করে একাধিক ট্রান্সফর্ম প্রয়োগ করতে পারেন যেমন:

<h3 class="rotated-heading">
    <span class="scaled-up">Hey!</span>
</h3>
<style type="text/css">
.rotated-heading
{
    transform: rotate(10deg);
}

.scaled-up
{
    transform: scale(1.5);
}
</style>

জাভাস্ক্রিপ্ট ব্যবহার করে ট্রান্সফর্মগুলির সাথে উপাদানগুলি অ্যানিমেট করার সময় এটি সত্যিই কার্যকর হতে পারে।

Comments

আপনার ভুলে যাচ্ছেনtransform-style: preserve-3d

— জ্যাক গিফিন

নেস্টেড 2 ডি রূপান্তরগুলির জন্য এটি প্রয়োজনীয় নয় - পছন্দসই ফলাফলের উপর নির্ভর করে। রূপান্তর-উত্স সম্ভবত কার্যকর হবে।

— সমৃদ্ধশালী

Answer 4

আপনি এটির মতো একাধিক রূপান্তর প্রয়োগ করতে পারেন:

li:nth-of-type(2){
    transform : translate(-20px, 0px) rotate(15deg);
}

Answer 5

ভবিষ্যতে কিছু সময়, আমরা এটি এইভাবে লিখতে পারি:

li:nth-child(2) {
    rotate: 15deg;
    translate:-20px 0px;        
}

উপাদানটিতে পৃথক ক্লাস প্রয়োগ করার সময় এটি বিশেষত কার্যকর হবে:

<div class="teaser important"></div>

.teaser{rotate:10deg;}
.important{scale:1.5 1.5;}

এই বাক্য গঠনটি অগ্রগতিতে সিএসএস ট্রান্সফর্ম লেভেল 2 স্পেসিফিকেশনে সংজ্ঞায়িত হয় , তবে ক্রোম ক্যানারি সম্পর্কিত অন্য ব্রাউজার সমর্থন সম্পর্কে কিছুই খুঁজে না। আশা করি কোনও দিন আমি ফিরে এসে এখানে ব্রাউজার সমর্থন আপডেট করব;)

এই নিবন্ধে তথ্যটি পেয়েছেন যা আপনি বর্তমান ব্রাউজারগুলির জন্য কাজের ক্ষেত্রগুলি সম্পর্কে যাচাই করতে চাইতে পারেন।

Answer 6

কেবল সেখান থেকে শুরু করুন যে সিএসএসে , আপনি যদি 2 টি মান বা তার চেয়ে বেশি মান পুনরাবৃত্তি করেন তবে !importantট্যাগ ব্যবহার না করে সর্বদা শেষেরটি প্রয়োগ করা হয়, তবে একই !importantসাথে আপনি যতটা পারেন ব্যবহার করা এড়াতে পারেন, তাই আপনার ক্ষেত্রে সমস্যাটি তাই দ্বিতীয় এই ক্ষেত্রে প্রথমটিকে ওভাররাইড রূপান্তর করুন ...

তাহলে আপনি যা চান তা কীভাবে করতে পারেন? ...

চিন্তা করবেন না , রূপান্তর একই সাথে একাধিক মান গ্রহণ করে ... সুতরাং নীচের এই কোডটি কাজ করবে:

li:nth-child(2) {
  transform: rotate(15deg) translate(-20px, 0px); //multiple
}

আপনি যদি রূপান্তর নিয়ে ঘুরে দেখতে চান তবে নীচের এমডিএন থেকে আইফ্রেমটি চালান :

<iframe src="https://interactive-examples.mdn.mozilla.net/pages/css/transform.html" class="interactive  " width="100%" frameborder="0" height="250"></iframe>

আরও তথ্যের জন্য নীচের লিঙ্কটি দেখুন:

<< সিএসএস রূপান্তর >>

Answer 7

রূপান্তর ঘোরান এবং একক লাইনে CSS অনুবাদ করুন: -কেন?

div.className{
    transform : rotate(270deg) translate(-50%, 0);    
    -webkit-transform: rotate(270deg) translate(-50%, -50%);    
    -moz-transform: rotate(270deg) translate(-50%, -50%);    
    -ms-transform: rotate(270deg) translate(-50%, -50%);    
    -o-transform: rotate(270deg) translate(-50%, -50%); 
    float:left;
    position:absolute;
    top:50%;
    left:50%;
    }

<html>
<head>
</head>
<body>
<div class="className">
  <span style="font-size:50px">A</span>
</div>
</body>
</html>