Z-Index kippen, HTML Webdesign?
Hallo es gibt ja den Z-index der die Elemente sozusagen Stapelt.
Kann ich diesen Index in die Mitte Kippen?
Somit könnte man doch einen 3D Raum Kreieren oder?
Also so dann:
______
______
______
Hä? Z-Index kenne ich. Aber was meinst du mit "Kippen" und mit "3D-Raum kreiren"
Stell die den Canvas oder Body wie eine DinA4 Seite vor, du hast die gesamte volle fläche vor dir und veschiebst das blatt nach hinten und siehst nurnoch die kante.
4 Antworten
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:
Genau. Du kannst aus einzelnen transformierten DIVs 3D-Würfel oder andere Objekte zusammensetzen.
https://3dtransforms.desandro.com/cube
https://keithclark.co.uk/articles/creating-3d-worlds-with-html-and-css/
Oh danke!! Voll schön, da freu ich mcih schon drauf mit zu spielen, wenn ichs mal geblickt habe.
LG
Ok dann lass mich anders Fragen, kann ich den Body(Raum) in einen neuen Raum verschieben, so das ich den 2- dimensionalen 4 -eckigen Körper dann in alle Richtung verschieben kann? Sollte ja auch mit nem einfachen DIV gehen.
Ah habs geht ja mit rotate()