Z-Index kippen, HTML Webdesign?

Hallo es gibt ja den Z-index der die Elemente sozusagen Stapelt.

Nein, das macht die Eigenschaft z-index nicht.

Somit könnte man doch einen 3D Raum Kreieren oder?

Für den 3D Effekt "kippen" steht Dir die CSS Regel transform zur Verfügung. Hier eine Anleitung und Beispiele:

https://3dtransforms.desandro.com/

Alex

Nein, der z-index gibt nur an welche Seite oben liegt. Also stell dir vor du hast 2 Blätter Papier, die sich überlagern/aufeinander liegen, dann gibt der z-index nur an welches dieser zwei Blätter oben liegt.

Wenn du einen 3D Raum kreieren willst musst du das mit CSS (wahrscheinlich über den Befehl transform) regeln.

Schönen Guten Abend.

Meinst du sowas in der art?

body {
 min-height: 600px;
}

/* Set up our figurative canvas */
.container {
 transform-style: preserve-3d;
 perspective: 1400px;

 position: absolute;
 top: 60%;
 left: 40%;
}

/* Base of slinky */
.slinky {
 transform: rotateX(-100deg) rotateZ(50deg);
 box-shadow: 0 0 50px 25px #ccc;
}

/* All slinky segments */
div {
 transform-style: preserve-3d;
 transform-origin: 50% 50%;
 transform: translateZ(-3px);
  
 width: 200px;
 height: 200px;
 background: transparent;
 border: 10px solid #888;
 border-radius: 104px;
 box-shadow: 0 0 2px 1px #000, inset 0 0 1px 1px #000;
 position: absolute;
 top: -10px;
 left: -10px;
 transition: all .75s ease-in-out;
}

.slinky div {
 transform-origin: -10% -10%;
}

/* Bend slinky when you hover */
body:hover .slinky div {
 transform-origin: -10% -10%;
 transform: rotateY(5deg) translateZ(-1px) translateY(-1px);
}

https://codepen.io/rupl/pen/ndOQBx

Mit Freundlichen Grüßen

鳴ふみ Narufumi

Nein. Mit z-index legst du nur fest, welches Element "vorne" liegt, wen sich mehrere Objekte überlappen.

Für 3D-Effekte kannst Du aber CSS transforms nutzen:

https://makingcss.com/transform