Beispiel:Perspective-origin.html
Aus SELFHTML-Wiki
<!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)
</figure>
</body> </html>
