css für Quadern - Problem mit Werten

rernanded

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

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:
Guten Morgen Moni und gleichfalls ein frohes neues Jahr!
Ich habe keine Lösung, nur eine Anmerkung:
Bei diesem:
Code: 
<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>
hatte ich zunächst Lernbedarf und musste recherchieren, was es damit auf sich hat. Aber coole Sache, man kann das CSS ein Mal zentral definieren und dann die Parameter individuell für die einzelnen Elemente festlegen. Fast wie bei einer Funktion beim Programmieren.
Hast Du das selbst gemacht?
Gruß, Ulrich
 
Hallo Moni,
Wenn ich dich richtig verstehe, solltest du das mit den CSS-Variablen hinbekommen:
1. "--k": steht für die Breite, dieser Wert sollte also bei allen Quadern gleich sein.
2. "--p": verändert sowohl die Breite als auch die x-Position. Ich würde dir vorschlagen diesen Wert - um es nicht zu kompliziert werden zu lassen - bei allen Quadern auf "0" zu setzen
3 "--dx": verändert die Position auf der X-Achse. Du kannst also den gewünschten Abstand hinterher damit feinjustieren.

Gruß Andreas
 
@Sempervivum, selbstgemacht wäre total übertrieben, aber ich hatte jede Menge Anregungen aus dem Netz und habe die dann zusammengebaut, ausgehend von zunächst nur einem Quader - tja und dann verliessen mich die Ideen.

@andreas-b: Grundsätzlich ist mir das alles schon klar. Nur das Ergebnis ist meist ein anderes als theoretisch gedacht. Vergiss die zentralen Parameter oben nicht.

MONI
 
Hallo Moni,

also mit diesen Parametern:
HTML: 
<div class="panel" style="--i: 0; --k: 0.5; --p: 0; --dx: 0;   --dz: 0"></div>
<div class="panel" style="--i: 1; --k: 0.5; --p: 0; --dx: 0.4; --dz: 0"></div>
<div class="panel" style="--i: 2; --k: 0.5; --p: 0; --dx: 0.8; --dz: 0"></div>

Bekomme ich dieses Ergebnis: (Die Farbe habe ich fürs Debugging hinzugefügt.)
1704458857873.png
Das dachte ich wolltest du erreichen.

rernanded hat gesagt.:
Vergiss die zentralen Parameter oben nicht.
Zum Vergrößern anklicken....
Meinst du damit das "Globale" "--dx"? Das ist ja nur dazu da, alle Blöcke auf der Dokumenten-X-Achse zu verschieben. Das hat ja keinen Einfluss auf die einzelnen Blöcke, da der Wert auf Element-Ebene nochmal überschrieben wird.

Grüße Andreas
 
@Andreas-B, das ist alles korrekt mit Farben, und danke an Dich, aber leg doch mal das Bild darauf. Dann siehst Du, dass Du dreimal den selben Bildausschnitt hast. Das Bild soll sich aber über alle drei Quader in Gänze verteilen.

MONI
 
Hallo Moni,

ich denke, ich verstehe dein Problem.
Ich glaube deine Pseudo Elemente sind einfach zu klein:

1704533799715.png
(Das Blaue is das Bild)

Wenn du diese vergrößerst, sieht es so aus:

1704534681791.png

Hier der Code dafür:
HTML: 
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<style>
    /*
        Hier müssen die alten Styles eingefügt werden.
    */
</style>
<style>
    .panel {
        /*
            Das Panel hat einen Wert für die Breite, auf den in den
            Pseudoelementen mit % referenziert werden kann.
        */
        width: 40vw
    }
    .panel:before,
    .panel:after {
        width: 100%;
        background: url("https://picsum.photos/1000/ ") 50% / cover;
        /*
            Der clip-path ist zentral definiert und wird über variablen gesteuert.
        */
        -webkit-clip-path: inset(var(--top) var(--right) var(--bottom) var(--left));
        clip-path: inset(var(--top) var(--right) var(--bottom) var(--left));
    }
    .panel::before {
        --top: 0;
        --right: calc((100% - var(--mid)));
        --bottom: 0;
      /*
          Der Clip-Path startet direkt am linken rand Punkt.
          Das klappt aber nur sofern  das ganze nicht weiter
          gedreht wird.
          Dann müssten man dem linken Wert noch einen Offset berechnen.
        */
        --left: 0;
    }
    .panel::after {
        --top: 0;
        --right: calc((100% - (var(--p) + var(--k)) * 90vmin));
        --bottom: 0;
        --left: var(--mid);
    }
</style>
</head>
<body translate="no">
    <div class="assembly" style="--dx: 0.4;">
        <div class="panel" style="--k: 0.5; --p: 0;   --dx: 0; --dz: 0"></div>
        <div class="panel" style="--k: 0.5; --p: 0.4; --dx: 0; --dz: 0"></div>
        <div class="panel" style="--k: 0.5; --p: 0.8; --dx: 0; --dz: 0"></div>
    </div>
</body>
</html>

Zur besseren Übersicht, habe ich meine Anpassungen in einem neunen Style-Tag gemacht. Die original Styles habe ich beim Snippet weggelassen.

Ich hoffe das hilft dir.


Andreas
 
Zuletzt bearbeitet:
@Andreas-B Sieht gut aus, und ich hab's probiert. Bis auf den rechten Quader(davon sieht man nur die linke Seitenwand) sowie den linken Anfangspunkt des Bildes im linken Quader ist alles okay.
Bitte poste doch nochmals das gesamte Script, irgendwas mache ich falsch. Wahrscheinlich mit meinen "alten" css.
MONI
 
Nochmal @Andreas-B: Ich habe mal .panel:before, .panel:after width: 100vmin; gesetzt, dann wird's besser und der rechte Quader ist zu einem Drittel seiner Breite zu sehen. Der Anfangspunkt des Bildes links ist nun auch so nach rechts "verrückt" - fast wie es sein soll.

Hier mein Code bisher:
HTML: 
<!DOCTYPE html>
<html>
<head>
<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: 100vmin;
  height: 60vmin;
  content: "";

    background: url("wow.jpg") 50% / cover;
        -webkit-clip-path: inset(var(--top) var(--right) var(--bottom) var(--left));
        clip-path: inset(var(--top) var(--right) var(--bottom) var(--left));
}

.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);

    --top: 0;
        --right: calc((100% - var(--mid)));
        --bottom: 0;
        --left: 0;
}

.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));

    --top: 0;
        --right: calc((100% - (var(--p) + var(--k)) * 90vmin));
        --bottom: 0;
        --left: var(--mid);
}
</style>
</head>
<body translate="no">
    <div class="assembly" style="--dx: 0;">
        <div class="panel" style="--k: 0.5; --p: 0;   --dx: 0; --dz: 0"></div>
        <div class="panel" style="--k: 0.5; --p: 0.4; --dx: 0; --dz: 0"></div>
        <div class="panel" style="--k: 0.5; --p: 0.8; --dx: 0; --dz: 0"></div>
    </div>
</body>
</html>




MONI
 
Zuletzt bearbeitet:
Hast recht, die Größe der Panels war nicht ausreichend.

Hier nochmal die angepasste Version:

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>
<style>
    .panel {
        width: 120vmin;
    }

    .panel:before,
    .panel:after {
        width: 100%;
        background: url("https://picsum.photos/1000/ ") 50% / cover;
        -webkit-clip-path: inset(var(--top) var(--right) var(--bottom) var(--left));
        clip-path: inset(var(--top) var(--right) var(--bottom) var(--left));
    }

    .panel::before {
        --top: 0;
        --right: calc((100% - var(--mid)));
        --bottom: 0;
        --left: 0;
    }

    .panel::after {
        --top: 0;
        --right: calc((100% - (var(--p) + var(--k)) * 90vmin));
        --bottom: 0;
        --left: var(--mid);
    }
</style>
</head>

<body translate="no">
    <div class="assembly" style="--dx: 0.4;">
        <div class="panel" style="--k: 0.5; --p: 0;   --dx: 0; --dz: 0"></div>
        <div class="panel" style="--k: 0.5; --p: 0.4; --dx: 0; --dz: 0"></div>
        <div class="panel" style="--k: 0.5; --p: 0.8; --dx: 0; --dz: 0"></div>
    </div>
</body>

</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück