केवल सीएसएस

के साथ घूर्णन घन बनाएं मैं एक प्रतियोगिता पर काम कर रहा हूं लेकिन मुझे कुछ कठिनाइयां हैं। मुझे केवल सीएसएस का उपयोग करके घन (घूर्णन) बनाना होगा। केवल एचटीएमएल कोड मैं का उपयोग करना होगा है:केवल सीएसएस

<div id="container"> 
    <div id="imasters-cube"> 
    <div class="front"></div> 
    <div class="back"></div> 
    <div class="top"></div> 
    <div class="right"></div> 
    <div class="bottom"></div> 
    <div class="left"></div> 
    </div> 
</div>

मैं एक छवि चिपकाया ताकि आप परिणाम है कि मैं जरूरत है देख सकते हैं:

http://www.sitepor500.com.br/index.php?q=criacao-site-seo&a

अब तक मैं करने के लिए absoluted तैनात तत्वों का उपयोग कर रहा 6 चेहरे बनाएं लेकिन मुझे नहीं पता कि इसे केवल सीएसएस का उपयोग करके घुमाएं। कोई जेएस, कृपया!

बहुत बहुत

स्रोत

2013-07-26 amandanovaes

यह बहुत व्यापक है। और इस पर कई ट्यूटोरियल/उदाहरण हैं http://cssdeck.com/labs/9avpkiv8vl http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/ http : //cssdeck.com/labs/simple-css3-3d-cube http://www.the-art-of-web.com/css/3d-transforms/#.UfHVDo3rwZw आदि –

आपको बहुत धन्यवाद! मैंने ब्राजीलियाई वेबसाइटों में कोई सफलता नहीं देखी। मेरी अंग्रेजी खराब है इसलिए मैंने अंग्रेजी में खोज नहीं की। लेकिन आपके पहले लिंक का एक बड़ा नमूना है! फिर से धन्यवाद। – amandanovaes

अरे सर @ ज़ेक्लूस मैं आपको अपनी समस्या का समाधान करने वाले व्यक्ति के रूप में कैसे उत्तर दूं? यह टिप्पणी में दिखाई देता है इसलिए मैं तुम्हारा चयन नहीं कर सकता! – amandanovaes

ट्यूटोरियल की टन कर रहे हैं धन्यवाद/उदाहरण ऐसा करने के तरीके बताते हैं: Example 1 Example 2 Example 3 Example 4 आदि

उदाहरण 2 से खींचा:

.spinner div { 
 
    position: absolute; 
 
    width: 120px; 
 
    height: 120px; 
 
    border: 1px solid #ccc; 
 
    background: rgba(255,255,255,0.8); 
 
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2); 
 
    text-align: center; 
 
    line-height: 120px; 
 
    font-size: 100px; 
 
} 
 

 
.spinner .face1 { 
 
    -webkit-transform: translateZ(60px); 
 
    -ms-transform: translateZ(60px); 
 
    transform: translateZ(60px); 
 
} 
 
.spinner .face2 { 
 
    -webkit-transform: rotateY(90deg) translateZ(60px); 
 
    -ms-transform: rotateY(90deg) translateZ(60px); 
 
    transform: rotateY(90deg) translateZ(60px); 
 
} 
 
.spinner .face3 { 
 
    -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px); 
 
    -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(60px); 
 
    transform: rotateY(90deg) rotateX(90deg) translateZ(60px); 
 
} 
 
.spinner .face4 { 
 
    -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); 
 
    -ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); 
 
    transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); 
 
} 
 
.spinner .face5 { 
 
    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); 
 
    -ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); 
 
    transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); 
 
} 
 
.spinner .face6 { 
 
    -webkit-transform: rotateX(-90deg) translateZ(60px); 
 
    -ms-transform: rotateX(-90deg) translateZ(60px); 
 
    transform: rotateX(-90deg) translateZ(60px); 
 
} 
 

 
.spinner { 
 
    -webkit-animation: spincube 12s ease-in-out infinite; 
 
    animation: spincube 12s ease-in-out infinite; 
 
    -webkit-transform-style: preserve-3d; 
 
    -ms-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-transform-origin: 60px 60px 0; 
 
    -ms-transform-origin: 60px 60px 0; 
 
    transform-origin: 60px 60px 0; 
 
} 
 

 
@-webkit-keyframes spincube { 
 
    16%  { -webkit-transform: rotateY(-90deg);    } 
 
    33%  { -webkit-transform: rotateY(-90deg) rotateZ(90deg); } 
 
    50%  { -webkit-transform: rotateY(180deg) rotateZ(90deg); } 
 
    66%  { -webkit-transform: rotateY(90deg) rotateX(90deg); } 
 
    83%  { -webkit-transform: rotateX(90deg);     } 
 
} 
 
@keyframes spincube { 
 
    16%  { -ms-transform: rotateY(-90deg); transform: rotateY(-90deg); } 
 
    33%  { -ms-transform: rotateY(-90deg) rotateZ(90deg); transform: rotateY(-90deg) rotateZ(90deg); } 
 
    50%  { -ms-transform: rotateY(180deg) rotateZ(90deg); transform: rotateY(180deg) rotateZ(90deg); } 
 
    66%  { -ms-transform: rotateY(90deg) rotateX(90deg); transform: rotateY(90deg) rotateX(90deg); } 
 
    83%  { -ms-transform: rotateX(90deg); transform: rotateX(90deg); } 
 
}

<div id="stage" style="width: 120px; height: 120px;"> 
 
    <div class="spinner"> 
 
     <div class="face1">1</div> 
 
     <div class="face2">2</div> 
 
     <div class="face3">3</div> 
 
     <div class="face4">4</div> 
 
     <div class="face5">5</div> 
 
     <div class="face6">6</div> 
 
    </div> 
 
</div>

स्रोत

2013-07-26 01:54:25

उस भाग्यशाली -ms-transform से छुटकारा पाएं। ऐसा लगता है कि यह आपकी संगतता में वृद्धि करेगा, लेकिन भलाई के लिए एसएमई शोध करें! वह ms prefixed ट्रांसफॉर्म केवल पूर्व-रिलीज़ में उपलब्ध था जो वास्तव में कोई भी और अधिक उपयोग नहीं करता है। तो, जो कुछ भी कर रहा है वह आपकी सीएसएस फ़ाइल में मूल्यवान जगह बर्बाद कर रहा है। –

@ 3.1415926535897932384626433833 यह पूरी तरह से निर्भर करता है [आप किस प्लेटफ़ॉर्म का समर्थन करना चाहते हैं] (http://stackoverflow.com/a/25110511/2065702)। यह जवाब * सभी * मामलों को कवर करना चाहता है। मूल्यवान परिवर्तन को मूल्यवान बनाना "मूल्यवान स्थान" नहीं है - यह वास्तव में नगण्य है जब इसे वास्तव में जरूरी है (उन ब्राउज़रों पर जो केवल '-ms -' रूपांतरणों का समर्थन करते हैं) –

केवल सीएसएस

उत्तर

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