CSS में कई ट्रांसफ़ॉर्मेशन कैसे लागू करें?

Question

CSS का उपयोग करते हुए, मैं एक से अधिक कैसे आवेदन कर सकता हूं 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

मैंने उन्हें "," द्वारा अलग करने की कोशिश की, जैसे कि कई छायाओं के साथ किया गया, लेकिन यह काम नहीं किया। धन्यवाद।

— बेन

क्या यह संभव है कि एक किण्वन को दूसरे से पहले लागू किया जाए ... जैसे घुमाव से पहले तिरछा। मेरे लिए कोई फर्क नहीं पड़ता कि मैं क्या करता हूं, पहले तत्व को घुमाया जाता है और फिर तिरछा किया जाता है जिसके परिणामस्वरूप कुछ ऐसा होता है जो मुझे नहीं चाहिए।

— मुहम्मद उमर

इसलिए अब उन्हें कई पंक्तियों में विभाजित किया गया है

— 18eb में 18

रूपांतर: अनुवाद (100px, 100px) घुमाएँ (45deg) अनुवाद (100px, 100px) घुमाएँ (45deg); बराबरी का रूपांतरण: अनुवाद (200px, 200px) घुमाएँ (90deg), आखिरी जोड़ देगा

— bigCat

@ jave.web, आपका मतलब बाएं से दाएं , दाएं से है? इसके लिए transform: scale(1,1.5) rotate(90deg);, पैमाना पैमाने से पहले होगा।

— 19

Answer 2

मैं यह उत्तर इसलिए जोड़ रहा हूं क्योंकि यह मददगार होने की संभावना है लेकिन सिर्फ इसलिए कि यह सच है।

मौजूदा उत्तरों का उपयोग करने के अलावा यह समझाते हुए कि एक से अधिक अनुवाद कैसे किए जाते हैं, आप 4x4 मैट्रिक्स का निर्माण स्वयं भी कर सकते हैं

मैंने कुछ रैंडम साइट से निम्नलिखित छवि को पकड़ा, जिसे मैंने गोलगप्पे खाते समय पाया था जो घूर्णी मैट्रिसेस दिखाता है:

एक्स अक्ष के
चारों ओर रोटेशन : वाई अक्ष के
आसपास रोटेशन : जेड अक्ष के आसपास रोटेशन:

मुझे अनुवाद का एक अच्छा उदाहरण नहीं मिल रहा है, इसलिए यह मानते हुए कि मुझे यह याद है / इसे समझना सही है, अनुवाद:

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

परिवर्तन पर विकिपीडिया लेख के साथ-साथ व्यावहारिक सीएसएस 3 ट्यूटोरियल पर अधिक देखें जो इसे अच्छी तरह से समझाता है। एक अन्य गाइड जो मैंने पाया कि मनमाने ढंग से रोटेशन मैट्रिस बताते हैं, मैट्रिस पर एगॉन रथ के नोट्स हैं

इन 4x4 मेट्रिक्स के बीच मैट्रिक्स गुणा काम करता है, इसलिए अनुवाद के बाद एक रोटेशन करने के लिए, आप उपयुक्त रोटेशन मैट्रिक्स बनाते हैं और अनुवाद मैट्रिक्स द्वारा इसे गुणा करते हैं।

यह आपको इसे सही तरीके से प्राप्त करने के लिए थोड़ी अधिक स्वतंत्रता दे सकता है, और यह किसी को भी यह समझने के लिए पूरी तरह से असंभव बना देगा कि यह क्या कर रहा है, जिसमें आप पांच मिनट भी शामिल हैं।

लेकिन, आप जानते हैं, यह काम करता है।

संपादित करें: मुझे बस एहसास हुआ कि मैं इसका सबसे महत्वपूर्ण और व्यावहारिक उपयोग करने से चूक गया था, जो कि जावास्क्रिप्ट के माध्यम से जटिल 3 डी रूपांतरण बनाना है, जहां चीजें थोड़ी अधिक समझ में आएंगी।

Comments

खानों में "यादृच्छिक साइट"। दुर्भाग्य से अब एक मृत कड़ी है।

— मैट सच

जैसा कि 9elements लिंक है :(

— मैट सच

@MattSach ओके, जाहिरा तौर पर "बाद में आज" मेरे लिए "छह महीने बाद" का अर्थ है, लेकिन कम से कम 9 सेलेक्शन लिंक तय है (किसी और ने वेकबैक के साथ यादृच्छिक साइटों का लिंक तय किया है, और मैंने उनके नेतृत्व का पालन किया है।)

— जेफ

मैंने आपको उन्हें समझने में मदद करने के लिए यह भी बनाया है।

— एलेक्स

यह वास्तव में इस विषय में फिट नहीं है

— user151496

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

यह सिंटैक्स इन-प्रगति CSS ट्रांसफ़ॉर्म लेवल 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>