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

Question

我有一个要求，需要以某种真实感旋转图像 - 在眼睛水平的倾斜水平面上，想象一个旋转的飞盘或直升机桨叶。

我的意思是，(不是像微调器那样的平面旋转)而是当它面向你时变大的东西在它向后旋转时消失 - 在与眼睛水平的倾斜水平面上。

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

1. 能否在没有 Canvas 的情况下使用 HTML5 简单地完成此操作？
2. 您能分享一个使用 canvas 或直接使用 HTML5 技巧的示例吗

Answer 1

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

transform: rotateX(45deg);

在容器上:

perspective: 500px;

试验精确值以获得您想要的效果。