css 3d旋轉和放大物體

Question

我嘗試旋轉圖像並放大（最好顯示在屏幕中央），但它不起作用。 第二個問題是，當一個對象增長時，它在其他對象下（z-index不起作用）。 任何人都可以提供幫助嗎？

.flip-container { 
 
    -webkit-perspective: 1000; 
 
} 
 

 
.flipped { 
 
    -webkit-transform: scale(2); 
 
    -webkit-transform: rotateY(180deg); 
 
} 
 

 
.flip-container, 
 
.front, 
 
.back { 
 
    width: 350px; 
 
    height: 230px; 
 
} 
 

 
.flipper { 
 
    -webkit-transition: 0.6s; 
 
    -webkit-transform-style: preserve-3d; 
 
    position: relative; 
 
} 
 

 
.front, 
 
.back { 
 
    -webkit-backface-visibility: hidden; 
 
    position: absolute; 
 
} 
 

 
.front { 
 
    z-index: -1; 
 
} 
 

 
.back { 
 
    -webkit-transform: rotateY(180deg); 
 
}

<div class="flip-container"> 
 
    <div class="flipper" onclick="this.classList.toggle('flipped')"> 
 
    <div class="front"> 
 
     <img id="services_img" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66"> 
 
    </div> 
 
    <div class="back"> 
 
     Wszystko za darmo 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

你不能設置2個變換這樣

transform: scale(2); 
transform: rotateY(180deg); 

因爲它們是相同的屬性，一個將覆蓋其他。

相反，串聯值

transform: scale(2) rotateY(180deg); 

.beneath { 
 
    width: 350px; 
 
    height: 230px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.txt { 
 
    height: 25px; 
 
} 
 

 
.beneath p { 
 
    float: left; 
 
} 
 

 
.beneath img { 
 
    width: 100%; 
 
} 
 

 
.flip-container img { 
 
    width: 100%; 
 
} 
 

 
.flipped { 
 
    transform-origin: center center; 
 
    transform: rotateY(180deg) scale(2); 
 
} 
 

 
.flip-container, 
 
.flipper, 
 
.front, 
 
.back { 
 
    width: 350px; 
 
    height: 230px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.flipper { 
 
    transition: 0.6s; 
 
} 
 

 
.front, 
 
.back { 
 
    backface-visibility: hidden; 
 
} 
 

 
.front { 
 
    z-index: 1; 
 
} 
 

 
.back { 
 
    transform: rotateY(180deg); 
 
}

<!-- elements beneath - example only --> 
 
<div class="beneath txt"> 
 
    <p>This is all beneath.</p> 
 
</div> 
 

 
<div class="beneath"> 
 
    <img src="http://via.placeholder.com/350x150" /> 
 
</div> 
 

 

 
<!-- Original --> 
 
<div class="flip-container"> 
 
    <div class="flipper" onclick="this.classList.toggle('flipped')"> 
 
    <div class="front"> 
 
     <img id="services_img" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66"> 
 
    </div> 
 
    
 
    <div class="back"> 
 
     Wszystko za darmo 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

我失去了爲什麼它不爲你工作。我已經調整了一些代碼，但沒有大量代碼，很難確定可能會導致問題的原因。

我注意到你的z-index爲-1。我猜是因爲你說它沒有什麼區別，它是從試錯中剩下的。

我拿出了相對位置，重新定位了你的絕對位置，並修正了你的z-index。

從我可以告訴，它的工作。您的代碼中可能存在更深層次的問題。

.beneath { 
 
    width: 350px; 
 
    height: 230px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.txt { 
 
    height: 25px; 
 
} 
 

 
.beneath p { 
 
    float: left; 
 
} 
 

 
.beneath img { 
 
    width: 100%; 
 
} 
 

 
.flip-container img { 
 
    width: 100%; 
 
} 
 

 
.flipped { 
 
    -webkit-transform: scale(2); 
 
    -webkit-transform: rotateY(180deg); 
 
} 
 

 
.flip-container, 
 
.front, 
 
.back { 
 
    width: 350px; 
 
    height: 230px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.flipper { 
 
    -webkit-transition: 0.6s; 
 
} 
 

 
.front, 
 
.back { 
 
    -webkit-backface-visibility: hidden; 
 
} 
 

 
.front { 
 
    z-index: 1; 
 
} 
 

 
.back { 
 
    -webkit-transform: rotateY(180deg); 
 
}

<!-- elements beneath - example only --> 
 
<div class="beneath txt"> 
 
    <p>This is all beneath.</p> 
 
</div> 
 

 
<div class="beneath"> 
 
    <img src="http://via.placeholder.com/350x150" /> 
 
</div> 
 

 

 
<!-- Original --> 
 
<div class="flip-container"> 
 
    <div class="flipper" onclick="this.classList.toggle('flipped')"> 
 
    <div class="front"> 
 
     <img id="services_img" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66"> 
 
    </div> 
 
    
 
    <div class="back"> 
 
     Wszystko za darmo 
 
    </div> 
 
    </div> 
 
</div>