CSS сетка перспектива / трансформация - PullRequest
Новая
       13

CSS сетка перспектива / трансформация

0 голосов
/ 20 июня 2019

Можно ли сделать бесплатные преобразования элемента с помощью CSS - аналогично сетчатому преобразованию?

enter image description here

Ближайшее, что я могу получить к этомуиспользует что-то вроде transform: perspective(400px) rotateY(45deg); с тремя элементами, но я бы хотел, чтобы это был один непрерывный img элемент.

1 Ответ

1 голос
/ 20 июня 2019

Вы можете рассмотреть 3 элемента и background-image. Хитрость заключается в том, чтобы отрегулировать размер фона / положение фона, чтобы создать иллюзию одного непрерывного изображения.

Наведите, чтобы увидеть результат: 

.box {
  margin: 50px auto;
  width: 200px;
  height: 200px;;
  background-size: 300% auto;
  background-position: center;
  position: relative;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  background-image: inherit;
  background-size: 300% auto;
  transform: perspective(800px);
  transition: 0.5s all;
}

.box:before {
  right: 100%;
  background-position: left;
  transform-origin: right;
}

.box:after {
  left: 100%;
  background-position: right;
  transform-origin: left;
}

.box:hover::before {
  transform: perspective(800px) rotateY(50deg);
  filter: brightness(0.8);
}

.box:hover::after {
  transform: perspective(800px) rotateY(-50deg);
  filter: brightness(0.8);
}
<div class="box" style="background-image: url(https://picsum.photos/id/1/1000/800)">
</div>
...