CSS-трансформации, дающие элементам div - PullRequest
Новая
       44

CSS-трансформации, дающие элементам div

0 голосов
/ 19 ноября 2018

Я строю изометрическую сетку кубов, созданную с помощью css, но у меня возникла проблема с контурами.

Вот чего я хотел бы достичь: Дизайн куба Но вот что у меня естьдошло до этого:

html cube Я пробовал обычные приемы, такие как использование некоторого translateZ и видимости задней поверхности, но безрезультатно.

Мой css выглядит так:

.cube {

transform: rotateX(55deg) rotateZ(45deg) translateX(50%) translateY(-50%);
transform-origin: 0% 0%;
transform-style: preserve-3d;
position: relative;
pointer-events:all;
transition: background-position ease 7s;
background-size: 400% 400%;


div {
  position: absolute;
  transition: background-position ease 7s;
  backface-visibility: hidden;

  &:first-child {
    transform-origin: center top;
    width: 100%;
    height:100%;
    transform: rotateX(-90deg);
    top: 100%;
  }

  &:nth-child(2) {
    transform-origin: left center;
    width: 100%;
    height: 100%;
    left: 100%;
    transform: rotateY(90deg);
  }
}

Любые идеи будут высоко оценены.

кодовая ссылка

1 Ответ

0 голосов
/ 19 ноября 2018

Хитрость здесь заключается в том, чтобы грани кубов перекрывались, и с помощью атрибута CSS background-blend-mode они смешивались друг с другом.Это заставляет кубы сливаться друг с другом и избавляться от странных границ.

Рабочая ссылка codepen здесь: https://codepen.io/anon/pen/LXzWjJ

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

Это нелучшее решение, но, похоже, работает.

Надеюсь, это поможет!

...