zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Pyramide

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.03.2023, 14:45
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 159
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard 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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.03.2023, 17:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.03.2023, 15:20
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 159
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 21.03.2023, 17:37
top top ist offline
Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 60
top wird schon bald berühmt werden
Standard

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);
	}
}
Mit Zitat antworten
  #5 (permalink)  
Alt 22.03.2023, 16:28
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 159
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von top Beitrag anzeigen
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);
	}
}
Ganz toll! Genauso habe ich mir das vorgestellt, aber eben nicht selbst umsetzen können. Vielen lieben Dank für deinen funktionierenden Code!

So schaut es jetzt aus
CodePen - 3D Pyramide - Pure CSS

Nochmals vielen Dank!
Schönen Tag noch
Mit Zitat antworten
  #6 (permalink)  
Alt 23.03.2023, 13:24
top top ist offline
Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 60
top wird schon bald berühmt werden
Standard

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 )
Mit Zitat antworten
  #7 (permalink)  
Alt 24.03.2023, 09:50
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 159
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von top Beitrag anzeigen
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 )
Danke für den Hinweis.
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:
Zitat von top Beitrag anzeigen
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.
Dazu habe ich eine Frage bzw. eine Aufgabenstellung.

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;
}
Das Ganze funktioniert aber nicht.
Kann das gar nicht funktionieren oder habe ich da etwas falsch gemacht?
Mit Zitat antworten
  #8 (permalink)  
Alt 27.03.2023, 16:57
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 28.03.2023, 09:42
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.09.2015
Beiträge: 159
Sabine1 befindet sich auf einem aufstrebenden Ast
Standard

Danke für die vielen Infos.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 16:13 Uhr.