Я строю изометрическую сетку кубов, созданную с помощью 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);
}
}
Любые идеи будут высоко оценены.
кодовая ссылка