0
How to make this effect of windows more outward and others more inward?
A Gambi que eu tenho até o momento:
body {
padding: 0;
margin: 0;
perspective: 900px;
perspective-origin: 100% 100%;
}
@keyframes rotation {
from {
transform: translateZ(-1000px) rotateY(0turn);
}
to {
transform: translateZ(-1000px) rotateY(1turn);
}
}
body > div {
height: calc(11 * 15vmin);
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
animation: rotation 5s infinite;
margin: -100px 0 0 -400px;
}
body > div > div {
width: 60vmin;
height: calc(11 * 15vmin);
position: absolute;
background-color: black;
}
#front {
background-color: skyblue;
padding: 0 20vmin;
transform: rotateY(0deg) translateZ(30vmin);
}
#back {
transform: rotateY(180deg) translate3d(-20vmin, 0vmin, 30vmin) scaleX(1.7);
}
#right {
transform: rotateY(90deg) translateZ(70vmin);
}
#left {
transform: rotateY(-90deg) translateZ(30vmin);
}
#top {
height: 100vmin;
transform: rotateX(90deg) translateZ(0);
}
#bottom {
height: 100vmin;
transform: rotateX(-90deg) translateZ(0);
}
div.left {
float: left;
}
div.right {
float: right;
}
div.col1 {
width: 15vmin;
}
div.col2 {
width: 30vmin;
}
div.col3 {
width: 45vmin;
}
div.row1 {
height: 15vmin;
}
div.row2 {
height: 30vmin;
}
div.row3 {
height: 45vmin;
}
div.top-1 {
margin-top: -15vmin;
}
div.left1 {
margin-left: 15vmin;
}
.red {
background-color: #eedfd1;
}
.green {
background-color: #ceffbb;
}
.yellow {
background-color: #e4ffc6;
}
.blue {
background-color: #c2fce2;
}<body>
<div>
<div id="front">
<div class="col1 row2 left blue"></div>
<div class="col1 row1 left green"></div>
<div class="col1 row1 left yellow"></div>
<div class="col1 row1 left red"></div>
<div class="col2 row1 left red"></div>
<div class="col1 row2 right green"></div>
<div class="col1 row1 left green"></div>
<div class="col1 row1 left yellow"></div>
<div class="col1 row1 left blue"></div>
<div class="col2 row2 left blue"></div>
<div class="col1 row1 left yellow"></div>
<div class="col1 row1 left blue"></div>
<div class="col2 row1 left red"></div>
<div class="col1 row1 left yellow"></div>
<div class="col1 row1 left red"></div>
<div class="col1 row2 left green"></div>
<div class="col1 row1 left yellow"></div>
<div class="col1 row3 right blue"></div>
<div class="col1 row1 left top-1 green"></div>
<div class="col1 row1 left top-1 left1 blue"></div>
<div class="col3 row1 left yellow"></div>
<div class="col1 row1 left red"></div>
<div class="col1 row1 left blue"></div>
<div class="col1 row1 left green"></div>
<div class="col1 row2 left yellow"></div>
<div class="col1 row1 left red"></div>
<div class="col1 row1 left red"></div>
<div class="col1 row1 left red"></div>
<div class="col1 row1 left blue"></div>
<div class="col1 row1 left green"></div>
<div class="col1 row1 left green"></div>
</div>
<div id="back"></div>
<div id="left"></div>
<div id="right"></div>
</div>
</body>
Is your intention to make the entire "building" run like this? Face very likely you would need to create a cube in place of each of these windows, and put some further forward than others there perhaps with the perspective stay close to what you want. And think about it... not everything is worth doing with CSS, And reflect that much of what you see there was done in some software and then exported in "web format" as the SVG for example that almost all are made in softwres, hardly anyone draws a more complex SVG in hand
– hugocsl
Take a look at the works of Ana Tudor that sometimes you find a basis to help you, or just to see some techniques even https://codepen.io/thebabydino/
– hugocsl
@hugocsl, yes, the idea is to make a 3d mockup for the user to interact with. I would recommend a software, preferably free?
– Costamilam
Dude, I’m not gonna be able to tell you, but I’m telling you, you’re gonna need to build the four faces of the block... The same would be indicated to do this in a 3D software and export a Gif, but if you want an interactive element there will complicate even.... Look here and give next to see if something appears that serves you https://codepen.io/thebabydino/pens/public/34/
– hugocsl
Thanks @hugocsl, I took a look, and in general, there are only a few cubes that I can rely on, I’ll have to break my head on this, I have less than a week and it’s the first time I move with 3d css
– Costamilam
I remembered you https://codepen.io/Gthibaud/pen/qyQryx
– hugocsl
@hugocsl I am not ninja to do this only with pure css, in the end the boss gave up doing this, there was only a table with the numbers of the apartments, but thanks for the help
– Costamilam