Как правильно использовать CSS 3D Transform для создания «панорамной сетки»? - PullRequest
Новая
       29

Как правильно использовать CSS 3D Transform для создания «панорамной сетки»?

0 голосов
/ 05 октября 2018

Итак, я попытался воссоздать этот с помощью CSS, и все пошло не так, как ожидалось.Это не очень отзывчивый и выглядит немного странно (мне пришлось поиграть с полями и слишком много масштабировать, так что на самом деле это выглядит довольно хорошо только на очень широком экране).Кто-нибудь может дать мне несколько советов о том, как быть более точным?Вот моя попытка на 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;
}

1 Ответ

0 голосов
/ 06 октября 2018

Измените свой первый макет и установите все дочерние элементы по центру в maps .

Теперь установите перспективу на контейнере, начало преобразования в некоторой точке переди поверните элементы.

Вы можете настроить величину кривизны этого эффекта, изменив начало преобразования и / или положение перспективы 

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>
...