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: jsfiddle.net/q6eyfpce — Rick Hitchcock
– Rick Hitchcock, Commented Jul 6, 2016 at 22:19
There's a good answer to this here: stackoverflow.com/a/14585866/4120837 Alternatively you can use the canvas' built-in transform functions. link — Lunster
– Lunster, Commented Jul 6, 2016 at 22:26

rphv · Accepted Answer · 2016-07-06 23:02:41Z

1

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>

answered Jul 6, 2016 at 23:02

rphv

5,5373 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Any way to achieve CSS 3D transform with javascript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related