CSS Perspective Transformation Example

css-perspective.js

// Variables to control the rotation and perspective of the image
var rotX = 0;
var rotY = 0;
var rotZ = 0;
var persp= 0;

// The skew increment
var skew = 0;
var deltaS=.5;

// The increment size (in degrees) per callback 
var deltaX = 0;
var deltaY = 0;
var deltaZ = 0;

// The perspective pixel increment
var deltaP= 0;

// Creating the image node from rando google logo
var image_node = document.createElement("IMG");
image_node.id="image";
image_node.src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
document.body.appendChild(image_node);

var image = document.getElementById('image');

// Callback to make the css style alterations
var funk=function(){ 
  
  rotX+=deltaX;
  rotY+=deltaY;
  rotZ+=deltaZ;
  skew+=deltaS;
  
  // Adjust Image Rotation Attributes
  image.style.transform="translateX(-96px) translateY(0px) translateZ(0px) rotateX("+
        rotX+"deg) rotateY("+rotY+"deg) rotateZ(" +rotZ+"deg) skew("+skew+"deg)"; 

  persp=(persp%800)+deltaP;    
  
  // Adjust Image Perspective Attributes
  image.style["-webkit-perspective"]= persp;
  image.style["-moz-perspective"]= persp+"px";
  image.style["-ms-perspective"]= persp;
  image.style.perspective= persp; 
  
  
}

// Time based callback to transform the image.
window.setInterval(funk,10);