public/hornwitser.no
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add sandbox.html page for development tests

Browse source 
Establish a playground for trying out complex components and styles
without having to use them in a content page.  This starts out as a
testing ground for the 3d Viewport.
This commit is contained in:
Hornwitser 2025-02-02 13:45:45 +01:00
parent 49a329ac43
commit 03edcf777a
3 changed files with 63 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

30
web/style.css
View file

@ -108,3 +108,33 @@ body {
.author p {
margin-block-end: 0;
}
/* sandbox */
.sandbox-inset-3d {
contain: paint;
background: black;
}
.sandbox-inset-3d .content {
background: grey;
transform: translateZ(-10rem);
padding: 1rem 1rem;
width: 80%;
margin-inline: auto;
}
.sandbox-inset-3d div:where(.floor, .ceiling) {
position: absolute;
inset-inline: 0;
height: 20rem;
}
.sandbox-inset-3d .floor {
bottom: 0;
background: blue;
transform: rotateX(90deg);
transform-origin: 0 100%;
}
.sandbox-inset-3d .ceiling {
top: 0;
background: green;
transform: rotateX(-90deg);
transform-origin: 0 0;
}