CSS視角中的問題

Question

我使用css視角創建了這個snippet，我將在項目中使用這個視角，但是第一行框有問題。

在第一行框中，我需要每個框的頂部邊框線像底部邊框線一樣彎曲。 就像第二排，這是從[頂部&底部]彎曲。

一些我用什麼：

-webkit-perspective: /* Chrome, Safari, Opera */ 
-webkit-perspective-origin: /* Chrome, Safari, Opera */ 
perspective: 
perspective-origin: 

而我snippet link在這裏。

謝謝。

Answer 1

您可以設置一個負的起源到主箱（如果我理解這個問題）：

perspective-origin: 60% -50%; 

#main-box { 
 
    position: absolute; 
 
    left: 43%; 
 
    top: 30%; 
 
    transform: translate(-50%, -50%); 
 
    height: 150px; 
 
    width: 700px; 
 
    margin: 50px; 
 
    padding: 10px; 
 
    /* border: 1px solid black; */ 
 
    -webkit-perspective: 150px; 
 
    /* Chrome, Safari, Opera */ 
 
    -webkit-perspective-origin: 10% 10%; 
 
    /* Chrome, Safari, Opera */ 
 
    perspective: 700px; 
 
    perspective-origin: 60% -50%; 
 
} 
 

 
.box { 
 
    z-index: 1; 
 
    width: 150px; 
 
    height: 120px; 
 
    position: absolute; 
 
    border: 1px solid black; 
 
    background-color: red; 
 
    text-align: center; 
 
    -webkit-transform: rotateX(20deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotateX(20deg); 
 
    transition-duration: .5s; 
 
} 
 

 
.box.second-row { 
 
    top: 150px; 
 
} 
 

 
.box:nth-of-type(1), 
 
.box:nth-of-type(6) { 
 
    left: 0; 
 
    -webkit-transform: rotateX(0deg) rotateY(20deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotateX(0deg) rotateY(30deg); 
 
} 
 

 
.box:nth-of-type(1):hover, 
 
.box:nth-of-type(6):hover { 
 
    left: 0; 
 
    -webkit-transform: rotateX(0deg) rotateY(20deg) translateZ(100px); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotateX(0deg) rotateY(30deg) translateZ(100px); 
 
} 
 

 
.box:nth-of-type(2), 
 
.box:nth-of-type(7) { 
 
    left: 180px; 
 
    -webkit-transform: rotateX(0deg) rotateY(15deg) translateZ(-68px); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotateX(0deg) rotateY(15deg) translateZ(-68px); 
 
} 
 

 
.box:nth-of-type(2):hover, 
 
.box:nth-of-type(7):hover { 
 
    left: 175px; 
 
    -webkit-transform: rotateX(0deg) rotateY(15deg) translateZ(100px); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotateX(0deg) rotateY(15deg) translateZ(100px); 
 
} 
 

 
.box:nth-of-type(3), 
 
.box:nth-of-type(8) { 
 
    left: 340px; 
 
    -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(-90px); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotateX(0deg) rotateY(0deg) translateZ(-90px); 
 
} 
 

 
.box:nth-of-type(3):hover, 
 
.box:nth-of-type(8):hover { 
 
    left: 340px; 
 
    -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(100px); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotateX(0deg) rotateY(0deg) translateZ(100px); 
 
} 
 

 
.box:nth-of-type(4), 
 
.box:nth-of-type(9) { 
 
    left: 500px; 
 
    -webkit-transform: rotateX(0deg) rotateY(-15deg) translateZ(-68px); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotateX(0deg) rotateY(-15deg) translateZ(-68px); 
 
} 
 

 
.box:nth-of-type(4):hover, 
 
.box:nth-of-type(9):hover { 
 
    left: 505px; 
 
    -webkit-transform: rotateX(0deg) rotateY(-15deg) translateZ(100px); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotateX(0deg) rotateY(-15deg) translateZ(100px); 
 
} 
 

 
.box:nth-of-type(5), 
 
.box:nth-of-type(10) { 
 
    left: 680px; 
 
    -webkit-transform: rotateX(0deg) rotateY(-20deg); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotateX(0deg) rotateY(-30deg); 
 
} 
 

 
.box:nth-of-type(5):hover, 
 
.box:nth-of-type(10):hover { 
 
    -webkit-transform: rotateX(0deg) rotateY(-20deg) translateZ(100px); 
 
    /* Chrome, Safari, Opera */ 
 
    transform: rotateX(0deg) rotateY(-30deg) translateZ(100px); 
 
} 
 

 
.box:hover { 
 
    z-index: 2; 
 
    background-color: blue; 
 
    transition-duration: .5s; 
 
}

<div id="main-box"> 
 
    <div class="box">BOX</div> 
 
    <div class="box">BOX</div> 
 
    <div class="box">BOX</div> 
 
    <div class="box">BOX</div> 
 
    <div class="box">BOX</div> 
 

 
    <div class="box second-row">BOX</div> 
 
    <div class="box second-row">BOX</div> 
 
    <div class="box second-row">BOX</div> 
 
    <div class="box second-row">BOX</div> 
 
    <div class="box second-row">BOX</div> 
 
</div>

https://codepen.io/gc-nomade/pen/BdWBNO甚至更​​多https://codepen.io/gc-nomade/pen/ayJodZ