css3 प्रतिशत

Question

में अनुवाद करता है मैं प्रतिशत के साथ पूरी तरह से एक css3 घन को परिभाषित करने पर अटक गया हूं।

Codepen

में यहाँ एक छोटी उदाहरण

http://codepen.io/anon/pen/detAB

आप घन चेहरे देख सकते हैं 100% चौड़ाई और उसकी मूल तत्व है, जो सही काम करता है की ऊंचाई कम है। अब मैं नीचे का चेहरा 50% नीचे और 50% वापस अनुवाद करने की कोशिश कर रहा हूं।

पिक्सेल मूल्यों के साथ इस है वहाँ किसी अन्य तरीके से कोई समस्या नहीं

transform: rotateX(-90deg) translateZ(50px) translateY(50px); 

लेकिन प्रतिशत कुछ भी नहीं के साथ होता है

transform: rotateX(-90deg) translateZ(50%) translateY(50%); 

है? या क्या मैं कुछ न कुछ भूल रहा हूं?

Answer 1

जिस तरह से आप उम्मीद कर सकते हैं उसमें मूल कंटेनर का प्रतिशत नहीं है, लेकिन तत्व स्वयं ही। कल्पना के रूप में वर्णन:

[प्रतिशत] तत्व का पिटारा

के आकार को देखें [एस]% s के बारे में, कल्पना का कहना है:

नोट करें कि मान translateZ अनुवाद-मूल्य में अनुमति नहीं है, और यदि वर्तमान में प्रॉपर्टी मान अमान्य हो जाएगा।

हालांकि, ऐसा लगता है कि इसके बजाय, वे कम से कम क्रोम के लिए उनमें से किसी में मान्य नहीं हैं।

क्षमा करें :(

Answer 2

सबसे अच्छा मैंने पाया जावास्क्रिप्ट का एक सा कर रहा है।

के बजाय translateZ() मूल्य का उपयोग कर, मैं अक्ष पर होने के लिए transform-origin: x y z का उपयोग किया है घन के केंद्र।

मुद्दा यह है कि घन इसके केंद्र चालू कर सकते हैं (और मुख्य चेहरा का एक केंद्र चालू नहीं और z का अनुवाद ...)

यहाँ है jQuery समारोह (अंततः $(document).ready() और $(window).resize() पर लागू करने के लिए):

function get50() { 
    var half_width = $('#front').width()/2; 
    $('#front').css({ 
    transformOrigin : '50% 50% -' + half_width + 'px' 
    }); 
} 

आप एक DEMO यहाँ देख सकते हैं ...