Any way to achieve CSS 3D transform with javascript?

Question

I want to rotate an image in 3D and this is possible in css with

transform: perspective(50px) rotateX(10deg) rotateY(10deg) rotateZ(10deg);

Currently I am using a canvas and the .style.transform property does not work for me. Example: https://jsfiddle.net/chung9ey/31/ . Note: I don't want to have a css file or style tags at all.

You could transform the canvas instead of the image: https://jsfiddle.net/q6eyfpce/ — Rick Hitchcock, Jul 06 '16 at 22:19
There's a good answer to this here: http://stackoverflow.com/a/14585866/4120837 Alternatively you can use the canvas' built-in transform functions. [link](http://www.w3schools.com/tags/canvas_transform.asp) — Lunster, Jul 06 '16 at 22:26

score 1 · Answer 1 · answered Jul 06 '16 at 23:02

Your code is basically correct, but instead of img.style.transform, transform the canvas with canvas.style.transform:

var img = new Image;
var canvas = document.getElementById("hello");
var context = canvas.getContext("2d");

img.onload = function(){
 canvas.style.transform = "perspective(50px) rotateX(10deg) rotateY(10deg) rotateZ(10deg)";
 context.drawImage(img, 0 ,0, 500, 300); 
}

img.src = "https://www.enterprise.com/content/dam/global-vehicle-images/cars/CHRY_200_2015.png";

<canvas id = "hello" width = "500px" height = "300px" style="border: 1px solid BLACK";></canvas>

Any way to achieve CSS 3D transform with javascript?

1 Answers1