Question

因此，我尝试使用CSS重新创建this，但实际上并没有达到预期的效果。它不是真的很灵敏，看起来有点奇怪（我不得不在边距上玩，而且缩放太多，所以在宽屏上看起来确实不错）。谁能给我一些关于如何提高准确性的提示？这是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

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

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

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

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变换创建“全景网格”？

1 个答案: