CSS
3 डी रूपांतरण

टिप्पणियों

3 डी क्यूब

3 डी परिवर्तनों का उपयोग कई 3D आकार बनाने के लिए किया जा सकता है। यहाँ एक सरल 3 डी सीएसएस घन उदाहरण है:

HTML:

<div class="cube">
  <div class="cubeFace"></div>
  <div class="cubeFace face2"></div>
</div>

सीएसएस:

body {
  perspective-origin: 50% 100%;
  perspective: 1500px;
  overflow: hidden;
}
.cube {
  position: relative;
  padding-bottom: 20%;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: rotateY(45deg) rotateX(0);
}
.cubeFace {
  position: absolute;
  top: 0;
  left: 40%;
  width: 20%;
  height: 100%;
  margin: 0 auto;
  transform-style: inherit;
  background: #C52329;
  box-shadow: inset 0 0 0 5px #333;
  transform-origin: 50% 50%;
  transform: rotateX(90deg);
  backface-visibility: hidden;
}
.face2 {
  transform-origin: 50% 50%;
  transform: rotatez(90deg) translateX(100%) rotateY(90deg);
}
.cubeFace:before, .cubeFace:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  background: inherit;
  box-shadow: inherit;
  backface-visibility: inherit;
}
.cubeFace:before {
  top: 100%;
  left: 0;
  transform: rotateX(-90deg);
}
.cubeFace:after {
  top: 0;
  left: 100%;
  transform: rotateY(90deg);
}

इस उदाहरण को देखें
अतिरिक्त स्टाइलिंग को डेमो में जोड़ा जाता है और क्यूब के 6 चेहरों को देखने के लिए होवर पर एक ट्रांसफॉर्मेशन लगाया जाता है।

ध्यान दिया जाना चाहिए कि:

• 4 चेहरे छद्म तत्वों से बने हैं
• जंजीर रूपांतरण लागू होते हैं

backface दृश्यता

backface-visibility प्रॉपर्टी 3 डी ट्रांसफॉर्म से संबंधित है।

3D ट्रांसफ़ॉर्म और backface-visibility प्रॉपर्टी के साथ, आप एक ऐसे तत्व को घुमाने में सक्षम होते हैं, जिससे किसी तत्व का मूल सामने अब स्क्रीन का सामना नहीं करता है।

उदाहरण के लिए, यह एक तत्व को स्क्रीन से दूर ले जाएगा:

JSFIDDLE

<div class="flip">Loren ipsum</div>
<div class="flip back">Lorem ipsum</div>

.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-backface-visibility: visible;
  -moz-backface-visibility:    visible;
  -ms-backface-visibility:     visible;
}

.flip.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}

फ़ायरफ़ॉक्स 10+ और IE 10+ एक उपसर्ग के बिना backface-visibility समर्थन करता है। ओपेरा, क्रोम, सफारी, आईओएस, और एंड्रॉइड सभी को -webkit-backface-visibility ।

इसके 4 मान हैं:

1. दृश्यमान (डिफ़ॉल्ट) - स्क्रीन के सामने न होने पर भी तत्व हमेशा दिखाई देगा।
2. छिपा हुआ - स्क्रीन का सामना न करने पर तत्व दिखाई नहीं देता है।
3. विरासत - संपत्ति को इसके मूल तत्व से इसका मूल्य मिलेगा
4. प्रारंभिक - संपत्ति को उसके डिफ़ॉल्ट पर सेट करता है, जो दिखाई देता है

3D ट्रांसफ़ॉर्म का उपयोग करके कंपास सूचक या सुई के आकार

सीएसएस

div.needle {
  margin: 100px;
  height: 150px;
  width: 150px;
  transform: rotateY(85deg) rotateZ(45deg);
  /* presentational */
  background-image: linear-gradient(to top left, #555 0%, #555 40%, #444 50%, #333 97%);
  box-shadow: inset 6px 6px 22px 8px #272727;  
}

एचटीएमएल

<div class='needle'></div>

उपरोक्त उदाहरण में, 3 डी ट्रांसफ़ॉर्म का उपयोग करके एक सुई या कम्पास सूचक आकृति बनाई जाती है। आम तौर पर जब हम किसी तत्व पर rotate ट्रांसफ़ॉर्म लागू करते rotate , तो रोटेशन केवल Z- अक्ष में होता है और सबसे अच्छे रूप में हम केवल हीरे की आकृतियों के साथ समाप्त होते हैं। लेकिन जब इसके ऊपर एक rotateY परिवर्तन जोड़ा जाता है, तो तत्व Y- अक्ष में निचोड़ा जाता है और इस तरह सुई की तरह दिखाई देता है। जितना अधिक Y- अक्ष का घुमाव उतना ही अधिक निचोड़ा हुआ तत्व दिखता है।

उपरोक्त उदाहरण का आउटपुट इसकी नोक पर आराम करने वाली सुई होगी। एक सुई बनाने के लिए जो अपने आधार पर आराम कर रही है, रोटेशन को एक्स-अक्ष के साथ-साथ वाई-अक्ष के साथ होना चाहिए। इसलिए transform प्रॉपर्टी की वैल्यू rotateX(85deg) rotateZ(45deg); जैसी कुछ होनी चाहिए rotateX(85deg) rotateZ(45deg); ।

यह पेन सफारी लोगो या कम्पास डायल जैसी दिखने वाली चीज़ बनाने के लिए एक समान दृष्टिकोण का उपयोग करता है।

बिना किसी परिवर्तन के तत्व का स्क्रीनशॉट:

केवल 2 डी परिवर्तन के साथ तत्व का स्क्रीनशॉट:

3 डी परिवर्तन के साथ तत्व का स्क्रीनशॉट:

छाया के साथ 3 डी पाठ प्रभाव

HTML:

<div id="title">
  <h1 data-content="HOVER">HOVER</h1>
</div>

सीएसएस:

*{margin:0;padding:0;}
html,body{height:100%;width:100%;overflow:hidden;background:#0099CC;}
#title{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  perspective-origin:50% 50%;
  perspective:300px;
}
h1{
  text-align:center;
  font-size:12vmin;
  font-family: 'Open Sans', sans-serif;
  color:rgba(0,0,0,0.8);
  line-height:1em;
  transform:rotateY(50deg);
  perspective:150px;
  perspective-origin:0% 50%;
}
h1:after{
  content:attr(data-content);
  position:absolute;
  left:0;top:0;
  transform-origin:50% 100%;
  transform:rotateX(-90deg);
  color:#0099CC;
}
#title:before{
  content:'';
  position:absolute;
  top:-150%; left:-25%;
  width:180%; height:328%;
  background:rgba(255,255,255,0.7);  
  transform-origin: 0 100%;
  transform: translatez(-200px) rotate(40deg) skewX(35deg);
  border-radius:0 0 100% 0;
}

अतिरिक्त होवर प्रभाव के साथ उदाहरण देखें

इस उदाहरण में, टेक्स्ट को यह रूपांतरित करने के लिए रूपांतरित किया जाता है कि यह उपयोगकर्ता से दूर स्क्रीन में जा रहा है।

छाया तदनुसार परिवर्तित होती है इसलिए यह पाठ का अनुसरण करती है। जैसा कि यह एक छद्म तत्व और data विशेषता के साथ बनाया गया है, यह रूपांतरों के रूप में विरासत में मिला है, यह माता-पिता (H1 टैग) है।

सफेद "प्रकाश" को #title तत्व तत्व पर छद्म तत्व से बनाया गया है। यह तिरछा है और गोल कोने के लिए सीमा-त्रिज्या का उपयोग करता है।