css für Quadern - Problem mit Werten

@Andreas-B: Phantastisch, danke Dir, was für eine Geburt.
Im obersten style bei
.panel:before,
.panel:after {
kann der background noch entfernt werden.
MONI
 
@Andreas-B: Hey das ist toll. Ich hatte auch nebenbei was anderes probiert. Funktioniert auch anders, aber das ist nicht so gut wie Deine Alternative und auch nicht fertig. Ich kann es ja nun lassen, da Du eine ... zwei Lösungen gefunden hast.
Mein Ansatz war der, jeweils die linke Randseite(left) und die Frontseite(main) und als erstes, zweites usw. element zu definieren, kommt auch ohne clip-path usw. aus. Die Perspektive zB habe ich nicht hingekriegt.
MONI
P.S. Wegen der Wiederholung => no-repeat einbauen?

HTML: 
.example > .block:nth-of-type(1) > .side.-main {
background-position: 0% 33%;
background-size: auto 100%;
}
.example > .block:nth-of-type(1) > .side.-left {
background-position: 0% 33%;
background-size: auto 100%;
}
.example > .block:nth-of-type(2) > .side.-main {
background-position: 33% 66%;
background-size: auto 100%;
}
.example > .block:nth-of-type(2) > .side.-left {
background-position: 33% 66%;
background-size: auto 100%;
}
.example > .block:nth-of-type(3) > .side.-main {
background-position: 66% 100%;
background-size: auto 100%;
}
.example > .block:nth-of-type(3) > .side.-left {
background-position: 66% 100%;
background-size: auto 100%;
}
 
@Andreas-B. Nochmals zu #10. Deine Version habe ich nochmals getestet und wenn ich die css zusammenfasse und in einen style schreibe, dann gibt es Merkwürdigkeiten. Zum Beispiel bei
.panel:before,
.panel:after
Da steht dann zweimal ein width. Was noch lösbar wäre nur "spinnt" die Wiedergabe trotzdem.
Ich weiß um Prioritäten und Hierarchien, kann aber keine Bedingungen dafür erkennen.
MONI
 
@rernanded Ich habe die Styles mal zusammengefasst:
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));
        width: 120vmin;

    }

    .panel:before,
    .panel:after {
        content: "";
        position: absolute;
        margin: -33vmin -66vmin;
        height: 60vmin;

        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;

        transform-origin: var(--mid);
        transform: rotatey(-90deg);
        filter: brightness(0.3);
    }

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

Doppelte Properties sind aber eigentlich kein Problem...

rernanded hat gesagt.:
P.S. Wegen der Wiederholung => no-repeat einbauen?
Zum Vergrößern anklicken....
Ist nicht nötig, schadet aber auch nicht.

PS: Ich habe den Pen nochmal überarbeitet.
 
@Andreas-B: Jetzt ist mit Code #10 bzw. #15 alles total suppi.
Dein neuer pen-code ist auch toll. Scheinst ja Gefallen an der Idee zu haben ;-).
Bei mir habe ich allerdings bei dem pen-code ein repeat und zwar senkrecht. Hast Du dafür eine Zeile oder ist es eine Sache der Bildgröße, des Seitenverhältnisses?
MONI
 
rernanded hat gesagt.:
Scheinst ja Gefallen an der Idee zu haben ;-)
Zum Vergrößern anklicken....
Ja, es ist ein spaßiges Projekt.

Das repeating liegt höchstwahrscheinlich am Seitenverhältnis. Daher habe ich das im Pen ja auch als Variable angelegt.
Das ist etwas, dass man über css nicht aus dem Bild auslesen kann, dafür bräuchte man dann JS.
Beim Pen-Code einfach die Variable "--ratio" auf den Wert deines Seitenverhältnisses setzen.
 
@Andreas-B: Yeap, das klappt wunderbar. Dann noch viel Spaß und nochmals vielen Dank.

Setz doch noch bei body einen Schatten ein: -webkit-filter: drop-shadow(-1vmin 1vmin 1vmin #000);

MONI
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück