有什么方法可以用 javascript 实现 CSS 3D 转换？

【问题标题】：Any way to achieve CSS 3D transform with javascript?有什么方法可以用 javascript 实现 CSS 3D 转换？
【发布时间】：2016-07-07 07:02:41
【问题描述】：

我想在 3D 中旋转图像，这可以在 css 中使用

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

目前我正在使用画布，而 .style.transform 属性对我不起作用。示例：https://jsfiddle.net/chung9ey/31/。注意：我根本不想有 css 文件或样式标签。

【问题讨论】：

你可以变换画布而不是图像：jsfiddle.net/q6eyfpce
这里有一个很好的答案：stackoverflow.com/a/14585866/4120837 或者，您可以使用画布的内置变换功能。 link

标签： javascript html css

【解决方案1】：

您的代码基本正确，但不是img.style.transform，而是用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";

&lt;canvas id = "hello" width = "500px" height = "300px" style="border: 1px solid BLACK";&gt;&lt;/canvas&gt;

【讨论】：