CSS Transform Origin Example

CSS Transform Origin Example.markdown

CSS Transform Origin Example

so cascade. many origin. much slider. many script. much simple. many example.

Forked from Joe Howard's Pen CSS Transform Origin Example.

A Pen by Ignet on CodePen.

License.

index.html

<div class="wrapper">
  
  <div class="square-wrap">
    <div class="square">CSS</div>
  </div>
  
  <div class="inputs">
    
    <div class="input-wrap">
      <span class="result-X">Rotate-X:</span>
      <input type="range" id="sliderX" min="-180" max="180" value="0" onchange="rangevalueX.value=value"/>
      <output id="rangevalueX">0deg</output>
     </div>
  
   <div class="input-wrap">
     <span class="result-Y">Rotate-Y:</span>
     <input type="range" id="sliderY" min="-180" max="180" value="0" onchange="rangevalueY.value=value"/>
     <output id="rangevalueY">0deg</output>
   </div>
  
  <div class="input-wrap">
     <span class="result-Z">Rotate-Z:</span>
     <input type="range" id="sliderZ" min="-180" max="180" value="0" onchange="rangevalueZ.value=value"/>
     <output id="rangevalueZ">0deg</output>
  </div>
    
  <div class="input-wrap">
     <span class="result-O">Origin-X:</span>
     <input type="range" id="sliderOR" min="-180" max="180" value="0" onchange="rangevalueOR.value=value"/>
     <output id="rangevalueOR">0px</output>
  </div>
  
   <div class="input-wrap">
     <span class="result-ORY">Origin-Y:</span>
     <input type="range" id="sliderORY" min="-100" max="100" value="0" onchange="rangevalueORY.value=value"/>
     <output id="rangevalueORY">0px</output>
  </div>
  
  
 </div>
  
</div>

script.js

// Box
var box = document.querySelector('.square');

// Translate X Variables
var sliderx = document.getElementById("sliderX");
var rangevalueX = document.getElementById("rangevalueX");

// Translate Y Variables
var sliderY = document.getElementById("sliderY");
var rangevalueY = document.getElementById("rangevalueY");

// Translate Z Variables
var sliderZ = document.getElementById("sliderZ");
var rangevalueZ = document.getElementById("rangevalueZ");

// Translate Origin X Variables
var sliderOR = document.getElementById("sliderOR");
var rangevalueOR = document.getElementById("rangevalueOR");

// Translate Origin Y Variables
var sliderORY = document.getElementById("sliderORY");
var rangevalueORY = document.getElementById("rangevalueORY");

// Property array
function getsupportedprop(proparray){
    var root=document.documentElement //reference root element of document
    for (var i=0; i<proparray.length; i++){ //loop through possible properties
        if (proparray[i] in root.style){ //if property exists on element (value will be string, empty string if not set)
            return proparray[i] //return that string
        }
    }
}
 
// Vendor Prefix Transform
var prefixtransform = getsupportedprop(["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"]);

// Vendor Prefix Orgigin Y
var prefixtransformoriginy = getsupportedprop(["transformOriginY", "msTransformOriginY", "webkitTransformOriginY", "mozTransformOriginY", "oTransformOriginY"]);

// Vendor Prefix Orgigin Z
var prefixtransformoriginx = getsupportedprop(["transformOriginX", "msTransformOriginX", "webkitTransformOriginX", "mozTransformOriginX", "oTransformOriginX"]);


// Slider X Function
sliderx.onchange = function () {

    if (rangevalueX < '50') {
        box.style[prefixtransform] = "rotateX(-" + (sliderx.value) + 'deg)' + "rotateY(-" + (sliderY.value) + 'deg)' + "rotateZ(-" + (sliderZ.value) + 'deg)';
        rangevalueX.value = sliderx.value + "deg";
    } else if (rangevalueX > '50') {
        box.style[prefixtransform] = "rotateX(" + sliderx.value + 'deg)' + "rotateY(" + sliderY.value + 'deg)' + "rotateZ(" + (sliderZ.value) + 'deg)';
        rangevalueX.value = sliderx.value + "deg";
    }
};

// Slider Y Function
sliderY.onchange = function () {

    if (rangevalueY < '50') {
        box.style[prefixtransform] = "rotateX(-" + (sliderx.value) + 'deg)' + "rotateY(-" + (sliderY.value) + 'deg)' + "rotateZ(-" + (sliderZ.value) + 'deg)';
        rangevalueY.value = sliderY.value + "deg";
    } else if (rangevalueY > '50') {
        box.style[prefixtransform] = "rotateX(" + sliderx.value + 'deg)' + "rotateY(" + sliderY.value + 'deg)' + "rotateZ(" + (sliderZ.value) + 'deg)';
        rangevalueY.value = sliderY.value + "deg";
    }
};

// Slider Z Function
sliderZ.onchange = function () {

    if (rangevalueZ < '50') {
        box.style[prefixtransform] = "rotateX(-" + (sliderx.value) + 'deg)' + "rotateY(-" + (sliderY.value) + 'deg)' + "rotateZ(-" + (sliderZ.value) + 'deg)';
        rangevalueZ.value = sliderZ.value + "deg";
    } else if (rangevalueZ > '50') {
        box.style[prefixtransform] = "rotateX(" + sliderx.value + 'deg)' + "rotateY(" + sliderY.value + 'deg)' + "rotateZ(" + (sliderZ.value) + 'deg)';
        rangevalueZ.value = sliderZ.value + "deg";
    }
}

// Origin X Function
sliderOR.onchange = function () {

    if (rangevalueOR < '50') {
        box.style[prefixtransformoriginx] = "-" + (sliderOR.value) +'px';
        rangevalueOR.value = sliderOR.value + "px";
    } else if (rangevalueOR > '50') {
        box.style[prefixtransformoriginx] = sliderOR.value + 'px';
        rangevalueOR.value = sliderOR.value + "px";
    }
}

// Origin Y Function
sliderORY.onchange = function () {

    if (rangevalueORY < '50') {
        box.style[prefixtransformoriginy] = "-" + (sliderx.value) +'px';
        rangevalueORY.value = sliderOR.value + "px";
    } else if (rangevalueORY > '50') {
        box.style[prefixtransformoriginy] = sliderORY.value + 'px';
        rangevalueORY.value = sliderORY.value + "px";
    }
}

style.css

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.inputs {
  position:relative;
}
.input-wrap {
  padding-right:80px;
}
.wrapper {
  padding:20px 0;
  text-align:center;
}
.square-wrap {
  position:relative;
  width:200px;
  height:200px;
  overflow:visible;
  margin:0 auto;
  -webkit-perspective: 100;
  -webkit-transform-style: preserve-3d;
  font-size:30px;
  color:#fff;
  line-height:100px;
}
.square {
  display:inline-block;
  position:absolute;
  width:100px;
  height:100px;
  background:#ee2a7b;
  overflow:hidden;
  margin-left:50px;
  margin-top:50px;
  left:0px;
  top:0px;
}
output {
  position:absolute;
}
span {
  margin:10px 10px 0 0;
}