CSS 3D Perspective Tool

Learn how to create CSS 3D Perspective Tool using html, css and/or js.

<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>
<style>
#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;
}

</style>

perslider.addEventListener("input", changePers, false);

function changePers() {
  perspective = perslider.value;
  container.style.webkitPerspective = perspective+"px";
  container.style.perspective = perspective+"px";
  persamount.innerHTML = perspective;
}

</script>

CSS 3D Perspective Tool

Random HTML Example Codes: