Beispiel:3D-transform-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> 

 <meta charset="UTF-8">
 <title>Flexible multi-panel background</title>

<style> html { 

 overflow: hidden;
 background: #333;

}

body { 

 margin: 0;
 height: 100vh;
 perspective: 125vmin;
 filter: drop-shadow(-1vmin 1vmin 1vmin #000);

}

div { 

 position: absolute;
 transform-style: preserve-3d;

}

.assembly { 

 top: 50%;
 left: calc(50% - .5*var(--dx)*85vmin);
 transform: rotatey(35deg);

}

.panel { 

 --mid: calc((var(--p) + var(--k)*0.25)*85vmin);
 transform: translate3d(calc(var(--dx)*85vmin), 0, calc(var(--dz)*85vmin));

} .panel:before, .panel:after { 

 position: absolute;
 margin: -32.5vmin -42.5vmin;
 width: 85vmin;
 height: 65vmin;
 background: url("https://wiki.selfhtml.org/images/d/dc/Landscape-2.svg") 50%/cover;
 content: "";

} .panel:before { 

 transform-origin: var(--mid);
 transform: rotatey(-90deg);
 -webkit-clip-path: inset(0 calc(100% - var(--mid)) 0 calc(var(--p)*100%));
         clip-path: inset(0 calc(100% - var(--mid)) 0 calc(var(--p)*100%));
 filter: brightness(0.4);

} .panel:after { 

 -webkit-clip-path: inset(0 calc(100% - (var(--p) + var(--k))*85vmin) 0 var(--mid));
         clip-path: inset(0 calc(100% - (var(--p) + var(--k))*85vmin) 0 var(--mid));

} </style> </head>

<body >

</body> </html>

Abgerufen am 20.11.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:3D-transform-1.html"