rernanded
Erfahrenes Mitglied
Hallo zusammen, und Frohes Neues Jahr nachträglich,
habe Problem mit den Werten in den divs class="panel" (--i --k --dx --dz) um drei gleichgroße Quader zu erstellen die perspektivisch angeordnet sind.
Einfach testweise mal wow.jpg ersetzen und angucken.
Ich möchte gerne drei gleiche Quader in der größe wie das mittlere, angeordnet so wie es das css es bereits hergibt. Links und rechts sind die beiden Quader aber kleiner.
Alle drei Quader sollen also so groß sein wie das mittlere und die Perpektive soll erhalten bleiben. Beiße mir daran schon seit zwei Stunden die Zähne aus.
Gruß
MONI
habe Problem mit den Werten in den divs class="panel" (--i --k --dx --dz) um drei gleichgroße Quader zu erstellen die perspektivisch angeordnet sind.
Einfach testweise mal wow.jpg ersetzen und angucken.
Ich möchte gerne drei gleiche Quader in der größe wie das mittlere, angeordnet so wie es das css es bereits hergibt. Links und rechts sind die beiden Quader aber kleiner.
Alle drei Quader sollen also so groß sein wie das mittlere und die Perpektive soll erhalten bleiben. Beiße mir daran schon seit zwei Stunden die Zähne aus.
Gruß
MONI
HTML:
<!DOCTYPE html>
<html>
<style>
html {
overflow: hidden;
background: #fff;
}
body {
margin: 0;
height: 100vh;
perspective: 180vmin;
-webkit-filter: drop-shadow(-1vmin 1vmin 1vmin #000);
}
div {
position: absolute;
transform-style: preserve-3d;
}
.assembly {
top: 50%;
left: calc(50% - 0.6*var(--dx)*90vmin);
transform: rotatey(36deg);
}
.panel {
--mid: calc((var(--p) + var(--k)*0.30)*90vmin);
transform: translate3d(calc(var(--dx)*90vmin), 0, calc(var(--dz)*90vmin));
}
.panel:before, .panel:after {
position: absolute;
margin: -33vmin -66vmin;
width: 90vmin;
height: 60vmin;
background: url("wow.jpg") 50%/cover;
content: "";
}
.panel:before {
transform-origin: var(--mid);
transform: rotatey(-90deg);
-webkit-clip-path: inset(0 calc(100% - var(--mid)) 0 calc(var(--p)*100%));
clip-path: inset(0 calc(100% - var(--mid)) 0 calc(var(--p)*100%));
filter: brightness(0.3);
}
.panel:after {
-webkit-clip-path: inset(0 calc(100% - (var(--p) + var(--k))*90vmin) 0 var(--mid));
clip-path: inset(0 calc(100% - (var(--p) + var(--k))*90vmin) 0 var(--mid));
}
</style>
</head>
<body translate="no" >
<div class="assembly" style="--dx: 0">
<div class="panel" style="--i: 0; --k: 0.25; --p: 0; --dx: 0; --dz: -0.2"></div>
<div class="panel" style="--i: 1; --k: 0.5; --p: 0.25; --dx: -0.1; --dz: 0"></div>
<div class="panel" style="--i: 2; --k: 0.25; --p: 0.75; --dx: 0; --dz: 0"></div>
</div>
</body>
</html>
Zuletzt bearbeitet: