<div id="playground-result">
  
  <div id="playground-property">Властивість perspective визначає відстань від площини екрана до точки збіжності ліній і тим самим задає, наскільки виражений ефект перспективи. Точка збіжності без задання розташовується в центрі елемента і може бути змінена за допомогою властивості perspective-origin.</div>
  
</div>

<div id="playground-value" class="cell medium-12 large-6">
  <input type="range" min="500" max="1000" value="1" id="playground-value-input">
</div>
#playground-property{
  background: #e4efc7;
  padding: 10px;
  transform: rotateY(15deg);
}
#playground-result{
  transition: none 0s ease 0s;
  perspective: 1000px;
  perspective-origin: 0px 50%;
  margin-bottom: 30px;
}
.child {
  background: #e4efc7;
  padding: 10px;
  transform: rotateY(15deg);	
}
.parent {
  perspective-origin: 0 50%;
  perspective: 1000px;
}
var range=document.querySelectorAll('#playground-value-input');

function changeHandler(event){var px=(this.value==0)?'':'px';document.getElementById('playground-result').style.perspective=this.value+px;document.getElementById('playground-code-value').innerText=this.value+px;}
Array.prototype.forEach.call(range,function(range){range.addEventListener('input',changeHandler);});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.