CSS3 3 डी मोड़ परिप्रेक्ष्य

Question

CSS3 3 डी परिवर्तन + एनिमेशन महान हैं। मैं सोच रहा हूं कि कुछ मोड़ने का कोई तरीका है या नहीं।

यह उदाहरण (पेपर) div को फ़्लिप करता है लेकिन एनीमेशन कठोर दिखता है क्योंकि, वास्तव में, जब आप पेपर फ्लिप करते हैं, तो यह थोड़ा सा झुकता है।

तो क्या कोई गुण मैंने अनदेखा किया या शायद एक संयोजन जो इसे दिखता है जैसे दिखता है? (छवि) झुकने के साथ

div { 
    width: 90%; 
    height: 700px; 
    position: fixed; 
    left: 5%; 
    top: 0; 
    background-color: rgba(0,0,0,0.9); 

    -webkit-transform: perspective(1000); 
    -webkit-transform-style: preserve-3d; 
    -webkit-transform-origin: top; 
    -webkit-animation: "page curl down" 1s ease-out forwards; 
} 

@-webkit-keyframes "page curl down" { 
    from { 
     -webkit-transform: rotate3D(1,0,0,180deg); 
    } 

    to { 
     -webkit-transform: rotate3D(0,0,1); 
    } 
} 

उदाहरण पेज कर्ल: http://www.20thingsilearned.com/: http://numerosign.com/software/css3machine/#documentation

Answer 1

संख्या सबसे अच्छा तरीका कैनवास उपयोग करने के लिए तो इस तरह, भर में एक छवि स्लाइड है। यहां यह काम करता है कि यह कैसे काम करता है: http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html

उस विधि के साथ कई सीमाएं हैं, लेकिन यह मैंने देखा है सबसे अच्छा है।

Answer 2

ब्राउज़र तत्व वर्तमान में एक एकल फ्लैट विमान पर कब्जा करने के लिए सीमित हैं। कोई बात नहीं क्या। मैंने किसी भी समय प्रगति के साथ कुछ समय के लिए घुमावदार <div>s अनुकरण करने के विचार से कुश्ती की है। सीमा के साथ एक पारदर्शी वस्तु का उपयोग करके, सीमा-त्रिज्या और matrix3d ​​"झुकाव" बना सकता है, लेकिन यह तब तक है जब तक यह जाता है। यदि आप सीमा-शीर्ष-बाएं-त्रिज्या सेट के साथ केवल सीमा-शीर्ष निर्दिष्ट करते हैं, तो आप घुमावदार अंत के साथ एक सीधी रेखा बना सकते हैं। जाहिर है, यह अभी भी एक एकल फ्लैट विमान का हिस्सा है, जो अपने भाई-द्वि-आयामी धुरी की दिशा में झुका हुआ है।
जैसे ही हम तीसरे आयाम में आपके 2-आयामी तत्व को झुकाव के बारे में सोचना शुरू करते हैं, यह वर्तमान में कब्जा नहीं करता है, यह वास्तव में कैनवास, वेबजीएल, या अन्य प्रतिपादन इंजनों के बिना असंभव हो जाता है।