css - HTML - 如何来回旋转，就像雷达一样朝向你和远离你 2.5D

Question

我有一个要求，需要以某种逼真的感觉旋转图像 - 在具有视线水平的倾斜水平面上，想象一个旋转的飞盘或直升机叶片。

我的意思是，（不是像微调器那样的平面旋转）但是当它面对你时变得更大的东西在它旋转回来时消失 - 在一个倾斜的水平面上与视线水平。

目标是使用图标或图像获得逼真的外观，看起来像使用 HTML 以 2.5D 旋转

1. 这可以用 HTML5 简单地完成，没有画布。
2. 你能用画布或直接的 HTML5 技巧分享一个例子吗

Answer 1

您可以使用 3D 变换在 CSS3 中执行此操作：

transform: rotateX(45deg);

在容器上：

perspective: 500px;

尝试使用确切的值以获得您想要的效果。