Beispiel:Perspective-origin.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>

.stage {

 width: 15em;
 height: 15em;
 border: thin solid #CCC;
 margin: 1em;

--origin: center center; perspective: 600px; perspective-origin: var(--origin); }

.panel {

 width: 100%;
 height: 100%;

border: medium solid;

 background: gold;
 transform: perspective(600px) rotateY(45deg);

}

figcaption {

 padding-top: 3em;

}

form {

 height: 6em;;

} label {

 display: block;

}

 </style>

<script> document.addEventListener('DOMContentLoaded', function () {

 const originXRange = document.querySelector('#origin-x-range');
 const originYRange = document.querySelector('#origin-y-range');
 const stage = document.querySelector('.stage');
 document.body.addEventListener('change', updateTransformation);

 function updateTransformation () { 
   const xValue = originXRange.value;
   const yValue = originYRange.value;

stage.style.setProperty('--origin', `${xValue}% ${yValue}%`);

 }

});


</script>

 <title>perspective-origin</title>

</head>

<body>

perspective-origin

<form id="controls">

 <label>
   perspective-origin x
   <input id="origin-x-range" type="range" min="-300" max="300" value="0" />
 </label>
 <label>
   perspective-origin y
   <input id="origin-y-range" type="range" min="-300" max="300" value="0" />
 </label>
</form> 
 

<figure class="stage">

<figcaption>

transform: perspective(600px)

rotateY(45deg)

</figcaption>

</figure>

</body> </html>