2016-11-16 12 views
5

लें का उपयोग कर, उदाहरण के लिए उसके पक्ष में एक वस्तु घूर्णन, साथ अंक ए, बी, सी और डी एक वर्ग:सीएसएस

a---b 
- - 
- - 
c---d 

मैं इसे घुमाना चाहते बाएं से दाएं तो अंक ए और सी होगा बी और डी के करीब आते हैं, जबकि बी और डी स्थिति में रहेंगे।

यह एक पुस्तक में एक पृष्ठ को फिसलने जैसा है, इसलिए पृष्ठ दूसरी ओर फिसल जाता है लेकिन अंक बी और डी नहीं बढ़ रहे हैं।

निकटतम बात मैं https://jsfiddle.net/pa9ykhwa/ जो मूल रूप से

div{ 
    transform-style: preserve-3d; 
    transition-duration: 1s; 
} 

div:hover { 
    transform-origin: 100%; 
    transform: rotateY(180deg) translateZ(0); 
} 

समस्या यह है कि आप स्पष्ट रूप से देख सकते हैं अंक B और D आगे बढ़ रहे हैं है है।

उत्तर

5

आप न केवल रोटेशन परिवर्तित कर रहे हैं, लेकिन यह भी मूल को बदलने

यह unhovered स्थिति पर सेट नहीं है, तो यह 50% डिफ़ॉल्ट मान

सही किया है:

div { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: red; 
 
    transform-style: preserve-3d; 
 
    transition-duration: 1s; 
 
    transform-origin: 100%; 
 
} 
 
div:hover { 
 
    transform: rotateY(180deg) translateZ(0); 
 
}
<div style=""> 
 

 
</div>