如何正确使用CSS 3D Transform 来创建"panoramic grid"？

Question

所以我尝试重新创建 this with CSS and it didn't really go as expected. It's not really responsive and looks a bit odd (I had to play around with margins and scale too much, so it really only looks kinda good on a very wide screen). Can anyone give me some hints on how to be more accurate? Here's my try on codepen。

HTML:

<div class="maps">
  <div class="de_cache"></div>
  <div class="de_cbble"></div>
  <div class="de_dust2"></div>
  <div class="de_inferno"></div>
  <div class="de_mirage"></div>
  <div class="de_nuke"></div>
  <div class="de_overpass"></div>
  <div class="de_train"></div>
</div>

CSS:

body,   html {
    margin: 50px;
    padding: 0;
}

.maps {
    display: flex;
}

.maps > div {
    width: 100%;
    height: 500px;

    transform-origin: center center 0px; 
    transition: all 0.2s ease 0s;
    -webkit-transform-origin: center center 0px; 
    -webkit-transition: all 0.2s ease 0s;
}

.maps > div:nth-child(1) {
    margin-right: 15px;
    transform: matrix3d(1, 0, 0.00, 0.00025, 0.00, 1, 0.00, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    background-color: lightseagreen;
}

.maps > div:nth-child(2) {
    margin-right: 5px;
    transform: matrix3d(0.95, 0, 0.00, 0.0002, 0.00, 0.95, 0.00, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    background-color: lightsalmon;
}

.maps > div:nth-child(3) {
    transform: matrix3d(0.91, 0, 0.00, 0.00015, 0.00, 0.91, 0.00, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    background-color: palegreen;
}

.maps > div:nth-child(4) {
    transform: matrix3d(0.885, 0, 0.00, 0.0001, 0.00, 0.885, 0.00, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    background-color: teal;
}

.maps > div:nth-child(5) {
    transform: matrix3d(-0.885, 0, 0.00, 0.0001, 0.00, -0.885, 0.00, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    background-color: rebeccapurple;
}

.maps > div:nth-child(6) {
    transform: matrix3d(-0.91, 0, 0.00, 0.00015, 0.00, -0.91, 0.00, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    background-color: lightpink;
}

.maps > div:nth-child(7) {
    margin-left: 5px;
    transform: matrix3d(-0.95, 0, 0.00, 0.0002, 0.00, -0.95, 0.00, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    background-color: limegreen;
}

.maps > div:nth-child(8) {
    margin-left: 15px;
    transform: matrix3d(-1, 0, 0.00, 0.00025, 0.00, -1, 0.00, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    background-color: palegoldenrod;
}

Answer 1

更改您的第一个布局，将所有子项设置在地图的中间居中。

现在，在容器上设置透视图，将变换原点置于平面前方的某个点，并使项目旋转。

您可以调整此效果的曲率量，改变变换原点and/or透视位置

body,   html {
    margin: 10px;
    padding: 0;
    height: 100%;
}

.maps {
    border: solid 1px red;
    width: 100%;
    height: 100%;
    perspective: 40vw;
}

.maps > div {
   height: 90%;
   width: 10%;
   position: absolute;
   left: 45%;
   transform-origin: center center 280vw;
}

.maps > div:nth-child(1) {
    background-color: lightseagreen;
    transform: rotateY(7.7deg);
}

.maps > div:nth-child(2) {
    background-color: lightsalmon;
    transform: rotateY(5.5deg);
}

.maps > div:nth-child(3) {
    transform: rotateY(3.3deg);
    background-color: palegreen;
}

.maps > div:nth-child(4) {
    transform: rotateY(1.1deg);
    background-color: teal;
}

.maps > div:nth-child(5) {
    transform: rotateY(-1.1deg);
    background-color: rebeccapurple;
}

.maps > div:nth-child(6) {
    transform: rotateY(-3.3deg);
    background-color: lightpink;
}

.maps > div:nth-child(7) {
    transform: rotateY(-5.5deg);
    background-color: limegreen;
}

.maps > div:nth-child(8) {
    transform: rotateY(-7.7deg);
    background-color: palegoldenrod;
}

<div class="maps">
  <div class="de_cache"></div>
  <div class="de_cbble"></div>
  <div class="de_dust2"></div>
  <div class="de_inferno"></div>
  <div class="de_mirage"></div>
  <div class="de_nuke"></div>
  <div class="de_overpass"></div>
  <div class="de_train"></div>
</div>

如何正确使用CSS 3D Transform 来创建"panoramic grid"？

How to correctly use CSS 3D Transform to create a "panoramic grid"?

css

3d

css-transforms