<div id="perspective-container">
<code>#container</code>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/male-model-large.jpg" alt="" id="model1">
<div id="slidercontainer">
<label for="slider">perspective: 100</label>
<input type="range" name="perspective-slider" min="100" max="2000" value="1200" id="perspective-slider">
<label for="perspective-slider">2000</label>
</div>
<div id="codesample">
<pre><code>div#container {
<strong>perspective: <span id="perspective-amount">1200</span>px; </strong>
}
img {
transform: rotateY(45deg);
}</code></pre>
</div>
</div>#perspective-container{
-webkit-perspective: 1200px;
perspective: 1200px;
-webkit-transform-style: preserve-3d;
padding: 2em;
background: #ccc;
max-width: 700px;
margin: 0 auto;
font-family: Avenir, Helvetica, sans-serif;
}
#model1 {
webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
width: 50%;
}
#perspective-container, #model1 {
margin-bottom: 4rem;
margin: 0 auto;
display: block;
}
#codesample{
width: 80%;
margin: 0 auto;
}
#container img{
margin-bottom: 2em;
}
#slidercontainer {
margin-left: 30%
}
#perspective-slider {
margin: 5%;
margin-top: 2rem;
}
#codesample{
background: #fff;
font-size: 1.5rem;
padding: 1rem;
margin-top: 1rem;
}
var perslider = document.getElementById("perspective-slider"),
perpic = document.getElementById("model1"),
persamount = document.getElementById("perspective-amount"),
container = document.getElementById("perspective-container");
perslider.addEventListener("input", changePers, false);
function changePers() {
perspective = perslider.value;
container.style.webkitPerspective = perspective+"px";
container.style.perspective = perspective+"px";
persamount.innerHTML = perspective;
}
External CSS
This Pen doesn't use any external CSS resources.