ट्रैपेज़ॉयड रूपांतरण

पर CSS3 matrix3d आयताकार मैं 'गिरने वाला कार्ड' प्रभाव बनाने के लिए CSS3 transform: matrix3d(<matrix>) के लिए वेबकिट के समर्थन का उपयोग करने का प्रयास कर रहा हूं। (इस के उत्पादन के लिए केवल लक्ष्य क्रोम है)ट्रैपेज़ॉयड रूपांतरण

अंत प्रभाव नीचे 4 चरणों के माध्यम से संक्रमण और के रूप में सिर्फ एक क्षैतिज रेखा खत्म करना चाहिए:

enter image description here

यहाँ सीएसएस मेरे पास है अब:

#test { 
      margin: auto auto; 
      height: 200px; 
      width: 200px; 
      border:1px solid black; 
      background-color: lightblue; 
      -webkit-perspective: 1000; 
      -webkit-transform-origin: 50% 100%; 
      -webkit-transform-style: preserve-3d; 
      -webkit-animation-name: flip-card;   
      -webkit-animation-duration: 1s;   
      -webkit-animation-iteration-count: infinite;   
      -webkit-animation-timing-function: linear; 
      -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5); 
     } 
     @-webkit-keyframes flip-card { 
      0% {-webkit-transform: ;} 
      100% {-webkit-transform: 
         matrix3d(1, 0, 0, 0, 
           0, 1, 0, 0, 
           0, 0, 0, 0, 
           0, 0, 0.001, 1);} 
     }

और एचटीएमएल परीक्षण के लिए सरल है:

<body> 
    <div id="test">this div should fall forward...</div> 
</body>

उपरोक्त में matrix3d this SO question पढ़ने पर आधारित था, लेकिन यह एक घटते वर्ग का उत्पादन करता है जो प्रारंभिक बॉक्स के नीचे परिभाषित एक्स-अक्ष के चारों ओर फ़्लिप करता है।

मैं समझता हूँ कि सीएसएस 2d मैट्रिक्स केवल एक बॉक्स के परिवर्तन द्वारा आयतों और समानांतर चतुर्भुज उत्पादन कर सकते हैं और है कि अनियमित आकार matrix3d जरूरत आपरेशन (this मेरी fading रेखीय बीजगणित ताज़ा करने में सहायक था!) को बदलने, लेकिन मैं केवल सक्षम होने लगते हैं आयताकार और समांतरोग्राम उत्पन्न करने के लिए।

मैंने matrix और transformation के साथ टैग किए गए कुछ SO प्रश्नों पर चारों ओर देखा है। उनमें से अधिकतर सीएसएस आधारित नहीं हैं और मैं जो रूपांतरण चाहता हूं उसे प्राप्त करने में सक्षम नहीं हूं।

स्रोत

2011-02-10 beggs

मैं यहाँ सीएसएस परिवर्तन मूल्यों के साथ बेला के लिए एक उपकरण बनाया: http://www.duopixel.com/ स्टैक/वेबकिटमेट्रिक्स /, लेकिन मुझे डर है कि मैं क्रोम के साथ एक ट्रैपेज़ॉयड नहीं बना सका। कोशिश करो। – Duopixel

@ डुओपिक्सल: यह एक अच्छा टूल है। मैं सफारी में एक ट्रैपेज़ॉयड बना सकता हूं ... लेकिन पंक्ति -1, कॉलम 4 स्लाइडर (शीर्ष दाएं स्लाइडर) को स्थानांतरित करके वाई-अक्ष पर एक्स-अक्ष नहीं है। क्रोम में एक ही स्लाइडर एक समानांतर बनाता है। मेरी समझ यह है कि मुझे एक्स-अक्ष समांतरोग्राम बनाने के लिए पंक्ति -4, कॉलम -3 स्लाइडर को ले जाना चाहिए, लेकिन इसका सफारी या क्रोम में कोई प्रभाव नहीं पड़ता है। – beggs

यह [कॉफीस्क्रिप्ट फीडल] (http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/#cp_embed_ifnqH) उपयोगी हो सकता है। जिस ब्लॉग पेज पर इसे एम्बेड किया गया है, उसके साथ कुछ उपयोगी स्पष्टीकरण भी हैं। – mbomb007

-webkit-perspective अभी तक क्रोम में काम नहीं करता है (केवल सफारी), इसलिए यह काम नहीं करेगा (सफारी में अपना कोड आज़माएं)। क्रोम में भी 3 डी ट्रांसफॉर्म, सामान्य रूप से थोड़ा सा iffy हैं, और एक के लिए, ग्रेडियेंट के साथ अच्छी तरह से गठबंधन नहीं करते हैं।

इसके अलावा आप जो भी कर रहे हैं उसे पूरा करने के लिए 3 डी 0 (0, 0, 0, 90 डिग्री) घुमाएं और साथ ही एक मैट्रिक्स भी काम करता है। मैट्रिक्स नोटेशन 3 डी रोटेट, स्कू, मूव और मूल को एक सरणी में संयोजित करने का एक छोटा सा तरीका है। चूंकि आप केवल एक्स-अक्ष के चारों ओर घूम रहे हैं, इसलिए आपको इन लंबाईओं पर जाने की आवश्यकता नहीं है।

webkit-transform: perspective(800) rotate3d(1, 0, 0, -90deg)

आपको क्या चाहिए वास्तव में है।

अद्यतन: यहाँ एक साथ link to a jsfiddle बिल्कुल क्या आपको लगता है कि के लिए देख रहे दोनों क्रोम और सफारी में काम करता है। कृपया ध्यान दें कि यह निर्दिष्ट करना महत्वपूर्ण है कि फ्लिप के लिए ट्रांसफॉर्म उत्पत्ति परिप्रेक्ष्य के मूल के समान ही है। वेबकिट-परिप्रेक्ष्य मूल निर्दिष्ट करता है कि "कैमरा" किसी भी 3 डी ट्रांसफॉर्म के सापेक्ष 3 डी स्पेस में है और यदि आप सावधान नहीं हैं तो अनजान परिणाम प्राप्त करना आसान है।

2 अद्यतन: परिप्रेक्ष्य अब सभी किनारे ब्राउज़र में समर्थित है (हालांकि फ़ायरफ़ॉक्स के विरोधी aliasing थोड़ा यह सिफारिश करने के लिए (है और -moz की जरूरत स्पष्ट रूप से))

3 अद्यतन: के लिए पार ब्राउज़र के लिए बेला अपडेट किया गया फ़ायरफ़ॉक्स, आईई और unprefixed।

स्रोत

2011-02-10 16:11:56

दिलचस्प, मैं rotateX() का उपयोग कर रहा था लेकिन यह परिप्रेक्ष्य प्रदान नहीं करता है कि ऑब्जेक्ट आगे गिर रहा है। मैंने विभिन्न परिप्रेक्ष्य सेटिंग्स और कुंजी फ्रेम जोड़े लेकिन उन्हें '3 डी' प्रभाव कभी नहीं मिला। मैं सफारी कोशिश करूंगा और देखें कि क्या अलग है। – beggs

मैंने सफारी 5.0.3 (विंडोज़) में परिप्रेक्ष्य परिवर्तनों की कोशिश की है और इसका कोई प्रभाव नहीं है। टूल में @ डूपिक्सेल ने अपनी टिप्पणी में उल्लेख किया है कि मुझे एक्स-अक्ष ट्रैपेज़ॉयड नहीं मिल सकता है, सफारी में केवल वाई-अक्ष एक है, जबकि क्रोम केवल वाई-अक्ष समांतरोग्राम उत्पन्न करेगा। ऐसा लगता है कि जवाब "संभव नहीं है"। – beggs

जब मैंने देखा कि सीमा-चौड़ाई एनिमेटेबल है, और आप सीमा चौड़ाई का उपयोग कर नकली trapezoids कर सकते हैं, तो मैं सीएसएस संक्रमण spec पढ़ रहा था। इसका मतलब है कि आप क्रोम, ओपेरा और एफएफ 4 में नकली गिरने वाले कार्ड कर सकते हैं!

#stage { 
    margin-top: 200px; 
    position: relative; 
} 

#trapezoid { 
    position: absolute; 
    bottom: 0; 
    border: solid 1px #fff; 
    border-bottom: solid 200px #c00; 
    width: 200px; 
    -webkit-transition: all ease 1s; 

} 

#stage:hover #trapezoid { 
    border: solid 50px #fff; 
    border-bottom: solid 20px #f11; 
    width: 100px; 

}

बेशक

, इस प्रमुख चेतावनियां है: अपने उदाहरण में कार्ड आगे की ओर गिर रही है, मैंने कोशिश की लेकिन ऐसा लगता है यह इस तकनीक के साथ संभव नहीं है। आकार के अंदर कोई भी सामग्री परिवर्तित नहीं की जाएगी, यह सिर्फ कार्ड आकार है। ओह, और कार्ड के आकार में कोई सीमा नहीं हो सकती है। प्रमुख दोष जो इसके वास्तविक जीवन अनुप्रयोग को सीमित करते हैं।

फिर भी, यह बहुत अच्छा है! यहां इसके साथ खेलते हैं: http://jsfiddle.net/mxgAu/

स्रोत

2011-02-18 06:28:31 Duopixel

लेकिन आप इसके अंदर कुछ भी नहीं डाल पाएंगे। –

हां, लेकिन कुछ चालबाजी के बिना नहीं। इस उत्तर को लिखने के बाद मैंने पाया कि पहले से ही एक jQuery प्लगइन है जो यह करता है: http://lab.smashup.it/flip/। – Duopixel

ओह बकवास! CSS3 3 डी के बिना 3 डी फ़्लिपिंग! http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/fx/tests/test_flip.html –

आप IE10 का उपयोग कर रहे हैं, तो समाधान हो सकता है:

.up{ 
    -ms-transform-origin: 50% 100%; 
    -ms-transform: perspective(100px) rotateX(7deg); 
} 

.down{ 
    -ms-transform-origin: 50% 0%; 
    -ms-transform: perspective(100px) rotateX(-7deg) scale(1); 
}

स्रोत

2012-02-21 13:59:58 frantisek

ट्रैपेज़ॉयड रूपांतरण

उत्तर

संबंधित मुद्दे