20.03.2023, 13:45
|
|||
|
|||
Pyramide
Hallo Leute,
ich habe nun mal die Bing AI und nach dem CSS und HTML Code für eine rotierende Pyramide mit Bildern auf den Außenflächen gefragt. Das Ergebnis war das folgende: Pyramide http://sabine.bplaced.net/Pyramide/style.css wie es sieht, funktioniert das ganze nicht. Habt ihr eine Idee, wie ich das ganze zum Laufen bringen kann? 
|
| Sponsored Links |
|
20.03.2023, 16:36
|
|||
|
|||
|
Wie soll diese "Pyramide" denn aussehen? Was soll sich rotieren?
Ja, ich weiß, wie eine Pyramide aussieht. Aber bei deinem Link sehe ich nur ein Quadrat. Was davon soll zur Pyramide werden? Da gibt es mehrere Elemente im Quelltext, wie soll das ganze am Ende funktionieren?
|
| Sponsored Links |
|
21.03.2023, 14:20
|
|||
|
|||
|
Die Pyramide sollte in etwa so aussehen und genauso rotieren wie die folgende:
https://sabine.bplaced.net/Pyramide/2/ Die CSS dazu ist die folgende: https://sabine.bplaced.net/Pyramide/2/2.css Bei dieser ist es für mich äußerst kompliziert, die Größe der Pyramide zu ändern. Da ist die CSS, die mir die Bing AI erstellt hat, irgendwie deutlich besser, da sich alles über die Variablen von Höhe und Breite ändern lässt und die Winkel daraus berechnet werden. http://sabine.bplaced.net/Pyramide/style.css
|
|
21.03.2023, 16:37
|
|||
|
|||
|
Diese KIs erzeugen schönen Code - die aber leider oftmals einfach nicht funktionieren.
Einer (von mehreren) Fehlern ist z. B., dass Winkelfunktionen wie atan bei CSS es nicht mögen, wenn die zu berechneten Werte eine Maßeinheit enthalten. Wie man solche "custom properties" nutzt kann man dort aber gut sehen. Versuche es mal mit folgender CSS-Datei: Code:
:root {
--base: 30vmin; /* Die Länge der Basis */
--height: 25vmin; /* Die Höhe der Pyramide */
--angle: acos(30/25/2); /* Zahlenwerte von base und height einsetzen */
--viewangle: 65deg; /* Neigungswinkel für die Ansicht */
}
body {
margin: 0;
padding: 0;
background: radial-gradient(#ffffff 15%, #a7caf0);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
perspective: 50vmin;
}
.pyramid {
background: #681e03;
width: var(--base);
height: var(--base);
transform: rotateX(var(--viewangle)) rotateZ(0deg);
transform-style: preserve-3d;
animation: spin 8s linear 0s infinite;
}
.pyramid:before {
content: "";
background: black;
width: 100%;
height: 100%;
position: absolute;
transform: translateZ(-10vmin);
box-shadow: 0 0 2vmin 2vmin #000000;
opacity: 0.15;
}
.pyramid span {
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
height: var(--height);
}
.pyramid span:nth-child(1) {
transform: rotateX(Calc(-1*var(--angle)));
transform-origin: center bottom;
bottom: 0;
filter: brightness(0.8);
background: url(https://picsum.photos/id/869/250/250) no-repeat center 100%;
background-size: cover;
}
.pyramid span:nth-child(2) {
transform: rotateY(var(--angle)) rotateZ(-90deg) translate3d(calc(var(--height)/2), calc(-0.5*var(--height)), 0);
transform-origin: right center;
right: 0;
background: url(https://picsum.photos/id/93/250/250) no-repeat center 100%;
background-size: cover;
}
.pyramid span:nth-child(3) {
transform: rotateX(var(--angle)) rotateZ(180deg) translate3d(0, calc(-1*var(--height)), 0);
transform-origin: center top;
top: 0;
filter: brightness(0.8);
background: url(https://picsum.photos/id/525/250/250) no-repeat center 100%;
background-size: cover;
}
.pyramid span:nth-child(4) {
transform: rotateY(Calc(-1*var(--angle))) rotateZ(90deg)
translate3d(calc(-0.5*var(--height)), calc(-0.5*var(--height)), 0);
transform-origin: left center;
left: 0;
background: url(https://picsum.photos/id/768/250/250) no-repeat center 100%;
background-size: cover;
}
@keyframes spin {
0% {
transform: rotateX(var(--viewangle)) rotateZ(0deg);
}
100% {
transform: rotateX(var(--viewangle)) rotateZ(360deg);
}
}
|
|
22.03.2023, 15:28
|
|||
|
|||
|
Zitat:
So schaut es jetzt aus CodePen - 3D Pyramide - Pure CSS Nochmals vielen Dank! Schönen Tag noch
|
|
23.03.2023, 12:24
|
|||
|
|||
|
Noch eine kleine Warnung:
In CSS ist acos() noch nicht lange verfügbar: https://caniuse.com/?search=acos() Chrome und Edge erste seit der neusten Version. (In Opera kommt es vermutlich auch bald.) Wenn du es also jetzt schon produktiv nutzen möchtest, würde ich dir empfehlen den Winkel mit dem Taschenrechner auszurechnen und erst mal manuell dort einzusetzen. ( In deinem Beispiel 71.79deg )
|
|
24.03.2023, 08:50
|
|||
|
|||
|
Zitat:
Das habe ich tatsächlich neulich schon selbst nachgeschaut. Ich frage mich, ob der Opera noch häufig genutzt wird oder ob man diesen ignorieren kann. Habe schon lange keine Statistik bezüglich der Browser-Verbreitung gesehen. Zitat:
Oftmals wird empfohlen, dass man die Schriftgröße (oder auch die Breite von Containern) in der Einheit rem angibt, damit die im Browser eingestellte Standard Schriftgröße berücksichtigt wird. Seit einigen Wochen unterstützen die großen Browser Container Query Units. Ich möchte die Schriftgröße flexibel nach der Breite des Containers gestalten und zusätzlich in der Einheit rem. Die Schriftgröße sollte bei einer Container-Breite von 280 Pixel (fast 18rem) 1rem betragen. Bei einer Container-Breite von 980 Pixel (61,25rem wenn die Standard-Schriftgröße 16 Pixel beträgt) so die Schriftgröße 1,25rem betragen. Also eine lineare Funktion. Und so habe ich das umgesetzt: Code:
:root {
--fs: calc((1cqi / 28) + 0.9);
}
p {
font-size: var(--fs)rem;
}
Kann das gar nicht funktionieren oder habe ich da etwas falsch gemacht?
|
|
27.03.2023, 15:57
|
|||
|
|||
|
Es ist egal ob Opera noch häufig genutzt wird oder nicht, er hat die selbe Rendering engine wie Chrome. Gleiches gilt auch für Edge, Vivaldi, Brave und wie sie nicht alle heißen.
Das heißt, dass diese Browser ein, zwei Versionen später die selben Funktionen wie Chrome haben. Opera kann mit dem neuesten Update zB die Pyramide problemlos anzeigen. Diese kleine Verzögerung in der Darstellung neuerster Features kann man verschmerzen. Schließlich ist ja auch nicht gesagt dass alle Benutzer immer automatisch auf die aktuellste Version aktualisieren. Sollte zwar automatisch passieren, kann aber bestimmt in Firmennetzwerken etc. anders eingestellt sein. Zu deiner zweiten Frage: Da würde sich doch ein neuer Beitrag auszahlen? Hat doch nichts mehr mit der Pyramide zu tun (und viel ist hier im Forum ohnehin nicht los) Ich tippe einmal darauf, dass die calc funktion eine einheit zurückliefert und die font size anweisung dann zwei Einheiten hat.
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Linear-Darstellung
