Perspective CSS Builder

by Adi Jaya

HTML

<div id="main">
  <div class="item item1">
    <div class="demo">AAA</div>
  </div>
  <div class="item item2">
     <div class="demo">BBB</div>
  </div>
</div>

<hr>


<label>Perspective : <code>0</code>
  <input class="input" type="range" name="perspective" min="0" max="2000" value="0"/>
</label>

<label>Rotate : <code>0</code>
  <input class="input" type="range" name="rotateY"  min="0" max="360" value="0"/>
</label>

<label>Z Position : <code>0</code>
  <input class="input" type="range" name="translateZ"  min="-300" max="300" value="0"/>
</label>

CSS

#main {
  border: 1px solid silver;
  padding: 10px;
  position: relative;
  height: 400px;
  margin: 0 auto;
}

.item {
  position: absolute;
  outline: 1px solid silver
}

.item1 {
  width: 150px;
  height: 150px;
  top: 10px;
  left: 20px;
  
}

.item2 {
  width: 150px;
  height: 150px;
  top: 100px;
  left: 200px;
}

.item.active {
  outline: 1px solid blue;
}

.demo {
    position: absolute;
    top: 35%;
    text-align: center;
    background: #4a84ff;
    left: 10px;
    right: 10px;
    padding: 15px;
}

.item2 .demo {
    background: #e91e63;
}


label {
    display: block;
    margin-bottom: 16px;
    border: 1px solid silver;
    padding: 10px;
    border-radius: 4px;
}

.input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    margin-top: 8px;
}

JavaScript

$( document ).on("click", ".item", function(){
	$( ".item" ).removeClass("active");
  $( this ).addClass("active");
  var data = {
  	perspective : ( $( this ).attr("data-perspective") ) ? $( this ).attr("data-perspective") : 0,
    rotateY : ( $( this ).attr("data-rotatey") ) ? $( this ).attr("data-rotatey") : 0,
    translateZ : ( $( this ).attr("data-translatez") ) ? $( this ).attr("data-translatez") : 0
  };
  $( '[name="perspective"]' ).val( parseInt( data.perspective ) ).change();
  $( '[name="rotateY"]' ).val( parseInt( data.rotateY ) ).change();
  $( '[name="translateZ"]' ).val( parseInt( data.translateZ ) ).change();
});


$( document ).on("input change", ".input", function(){
	var item = $( ".item.active" );
  var target = item.find(".demo")
  if( item.length == 0 ) return alert( "Please Select Item" );
	var name = $( this ).attr("name");
  var output = $( this ).parents("label").find("code");
  var val = $( this ).val();
  	output.text( val );
  if( name == "perspective" ){
		item.css({
    	"perspective" : val + "px",
      "-webkit-perspective" : val + "px",
      "-moz-perspective" : val + "px",
    }).attr( "data-perspective", val );
	}
  var rotateY = $( '[name="rotateY"]' ).val();
  var translateZ = $( '[name="translateZ"]' ).val();
  if( name == "rotateY" ){
  	target.css({
    	"transform": "rotateY("+ val +"deg) translateZ("+ translateZ +"px)"
    });
    item.attr( "data-rotatey", val );
  }
  if( name == "translateZ" ){
  	target.css({
    	"transform": "rotateY("+ rotateY +"deg) translateZ("+ val +"px)"
    });
    item.attr( "data-translatez", val );
  }
});