/ / केंद्र लंबवत और क्षैतिज रूप से घूर्णन div - jquery, html, css, rotation, center

केंद्र लंबवत और क्षैतिज रूप से घूर्णन div - jquery, html, css, rotation, center

मैं खिड़की के अंदर क्षैतिज और लंबवत एक डीवीवी केंद्र करने की कोशिश कर रहा हूं। सीएसएस और जेएस के साथ थोड़ा सा आसान है। लेकिन समस्या यह है कि मेरा डीआईवी घुमाया गया है (-33deg)।

इसलिए मुझे यह नहीं पता कि इसे सही तरीके से कैसे केंद्रित किया जाए। मैंने ट्रांसफॉर्म-उत्पत्ति के साथ खेलने की कोशिश की, और jQuery में गणना के साथ, लेकिन सफल नहीं हुआ।

$ ("mydiv")। चौड़ाई () मुझे डीआईवी की चौड़ाई नहीं घुमाती है ... वास्तविक "विकर्ण" चौड़ाई नहीं ... (ऊंचाई के लिए समान)।

मैं इसे निश्चित मार्जिन के साथ मैन्युअल रूप से ठीक नहीं कर सकता, क्योंकि वेबसाइट को उत्तरदायी होने की आवश्यकता है ...

क्या यह संभव है ?

यह परिणाम है कि मुझे यह होना चाहिए:

http://hpics.li/497b120

मदद के लिए आपका बहुत बहुत धन्यवाद !

मॉर्गन

(क्षमा करें अगर मैंने कुछ अंग्रेजी गलतियां की हैं: एस)

उत्तर:

जवाब के लिए 0 № 1

ऐसा लगता है कि सीएसएस ट्रांसफॉर्म, पूर्ण पोजिशनिंग और ट्रांसफॉर्म उत्पत्ति का संयोजन मेरे लिए किया गया है।

.element {
transform: rotateZ(30deg) translateX(-50%) translateY(-50%);
transform-origin: 0% 0%;
position: absolute;
left: 50%;
top: 50%;
}

लिटिल डेमो: http://jsbin.com/suxawefabe/1/