मैं ब्रोशर बनाना चाहता हूं जो किसी के ऊपर मंडराने पर बाईं और दाईं ओर खुलता है। मैं ब्रोशर की बाईं साइट के लिए transform-origin: 0% और transform: rotateY(-180deg) का उपयोग करता हूं ताकि वह बाईं साइट (कार्ड लाल और नीला) को खोल सके। दाईं ओर के लिए मैं निश्चित रूप से transform-origin: 100% और transform: rotateY(180deg) का उपयोग सही साइट (कार्ड हरा) को खोलने के लिए करता हूं।

लेकिन दाईं ओर का वास्तविक व्यवहार यह है कि यह transform-origin: 0% लागू होता है और ब्रोशर की बाईं साइट के पीछे घूमता है (इसीलिए आप इसे नहीं देख सकते हैं, लेकिन यह वहां है)।

मुझे समझ नहीं आ रहा है कि transform-origin: 100% प्रभाव क्यों नहीं लेते।

यह रहा कोड: https://jsfiddle.net/eL6q3hp4/2/

.book-container {
  height: 350px;
  width: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}

.book-part {
  height: auto;
  width: auto;
  position: absolute;
  transform-style: preserve-3d;
  top: 0;
  left: 0;
}

.book-part > .card {
  height: 350px;
  width: 250px;
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* RIGHT SITE */
.right-part {
  transform-origin: 0%;
}
.right-card {
  transform: rotateY(-180deg);
}
.book-container:hover .right-part {
  transform: rotateY(180deg);
  transition: 0.7s;
  transition-delay: 0.3s;
}

/* LEFT SITE */
.left-part {
  transform-origin: 100%;
}
.left-card {
  transform: rotateY(180deg);
}
.book-container:hover .left-part {
  transform: rotateY(-180deg);
  transition: 0.7s;
}


.middle-card {
  background-color: blue;
}

.right-card {
  background-color: green;
}

.left-card {
  background-color: red;
}

.front-card {
  background-color: yellow;
}
    <div class="book-container">
        <div class="book-part middle-part">
            <div class="card middle-card"></div>
        </div>
        <div class="book-part right-part">
            <div class="card right-card"></div>
        </div>
        <div class="book-part left-part">
            <div class="card left-card"></div>
            <div class="card front-card"></div>
        </div>
    </div>
3
Darius Mann 2 पद 2019, 22:10

2 जवाब

सबसे बढ़िया उत्तर

.book-part से एब्सोल्यूट पोजीशन हटा दें और रोटेशन वैल्यू को उल्टा कर दें। आप दाएं ब्लॉक में एक फ्रंट कार्ड भी जोड़ सकते हैं

मैंने समापन प्रभाव में संक्रमण भी जोड़ा:

.book-container {
  height: 350px;
  width: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: 1000px;
}

.book-part {
  transform-style: preserve-3d;
}

.book-part>.card {
  height: 350px;
  width: 250px;
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}


/* RIGHT SITE */

.right-part {
  transform-origin: 0%;
  transition: 0.7s;
}

.right-card {
  transform: rotateY(180deg);
}

.book-container:hover .right-part {
  transform: rotateY(-180deg);
  transition-delay: 0.3s;
}


/* LEFT SITE */

.left-part {
  transform-origin: 100%;
  transition: 0.7s;
  transition-delay: 0.3s;
}

.left-card {
  transform: rotateY(-180deg);
}

.book-container:hover .left-part {
  transform: rotateY(180deg);
  transition-delay: 0s;
}
<div class="book-container">
  <div class="book-part middle-part">
    <div class="card middle-card" style="background:blue"></div>
  </div>
  <div class="book-part right-part">
    <img class="card right-card" style="background:green">
    <img class="card front-card" style="background:pink;">
  </div>
  <div class="book-part left-part">
    <img class="card left-card" style="background:red"> 
    <img class="card front-card" style="background:yellow">
  </div>
</div>

आप अपने कोड को नीचे की तरह सरल भी कर सकते हैं:

.book-container {
  height: 350px;
  width: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: 1000px;
  background:blue;
}
.book-container > div{
  transform-style: preserve-3d;
}

.book-container > div:before,
.book-container > div:after{
  content:"";
  height: 350px;
  width:100%;
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  background:yellow;
}


/* RIGHT SITE */
.right-part {
  transform-origin: 0%;
  transition: 0.7s;
}

.book-container .right-part:before {
  transform: rotateY(180deg);
  background:green;
}

.book-container:hover .right-part {
  transform: rotateY(-180deg);
  transition-delay: 0.3s;
}


/* LEFT SITE */
.left-part {
  transform-origin: 100%;
  transition: 0.7s;
  transition-delay: 0.3s;
}

.book-container .left-part:before {
  transform: rotateY(180deg);
  background:red;
}

.book-container:hover .left-part {
  transform: rotateY(180deg);
  transition-delay: 0s;
}
<div class="book-container">
  <div class="right-part">
  </div>
  <div class="left-part">
  </div>
</div>
0
Temani Afif 2 पद 2019, 20:16

मुझे नहीं पता कि मूल स्थिति में आप गतिशील आकारों के साथ काम करते हैं (जिस स्थिति में यह समाधान लागू नहीं होगा), लेकिन आप इसे काम करने के लिए transform-origin के लिए पिक्सेल मान का उपयोग कर सकते हैं:

.book-container {
  height: 350px;
  width: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}

.book-part {
  height: auto;
  width: auto;
  position: absolute;
  transform-style: preserve-3d;
  top: 0;
  left: 0;
}

.book-part > .card {
  height: 350px;
  width: 250px;
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* RIGHT SITE */
.right-part {
  transform-origin: 250px;
}
.right-card {
  transform: rotateY(180deg);
}
.book-container:hover .right-part {
  transform: rotateY(180deg);
  transition: 0.7s;
  transition-delay: 0.3s;
}

/* LEFT SITE */
.left-part {
  transform-origin: 0%;
}
.left-card {
  transform: rotateY(-180deg);
}
.book-container:hover .left-part {
  transform: rotateY(-180deg);
  transition: 0.7s;
}


.middle-card {
  background-color: blue;
}

.right-card {
  background-color: green;
}

.left-card {
  background-color: red;
}

.front-card {
  background-color: yellow;
}
<div class="book-container">
        <div class="book-part middle-part">
            <div class="card middle-card"></div>
        </div>
        <div class="book-part right-part">
            <div class="card right-card"></div>
        </div>
        <div class="book-part left-part">
            <div class="card left-card"></div>
            <div class="card front-card"></div>
        </div>
    </div>
0
Johannes 2 पद 2019, 19:53