CSSのパースペクティブでの問題

Question

私はプロジェクトで使用するcssパースペクティブを使用してsnippetを作成しましたが、ボックスの最初の行に問題があります。

最初の行のボックスでは、各ボックスの上の境界線が下の境界線のように湾曲する必要があります。 2列目と同様に、[上段&下]の両方から曲がっています。

私が使用したもののいくつか：

-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