javascript - 使用 css 或 js 以一定倾斜 Angular 或椭圆形状旋转对象 360 度

Question

我试图在以一定 Angular 放置的圆柱体顶部旋转 ARM 对象，以获得完整对象的最大视野。

因此我需要使用 css 或 javascript 在圆柱体顶部旋转 ARM ，它看起来应该与圆柱体一样倾斜。

帮我实现这个。谢谢...

.scara-arm {
  width: 30px;
  height: 30px;
  margin: 1px auto;
  transform: rotate(0deg);
}

.scara-arm.autoplay {
  animation: rotatearm 8s linear infinite;
  -webkit-animation: rotatearm 8s linear infinite;
}

Demo with code

Answer 1

要使 ARM 具有 3d 外观，您需要在 X 轴上旋转它 - 这是您已经在进行的 Z 轴旋转的补充。

.scara-arm {
  transform: rotateZ(0deg) rotateX(55deg);
}

请注意，这需要在几个地方进行更改 - 在您添加 旋转X。

您还可以通过向 ARM 的容器添加一些透视来改善 3d 效果:

.circle-small {
  perspective: 75em;
}

我建议您尝试使用 perspective(CSS 行 #43)和 rotateX(CSS 行 77 和 252-268)的数字来改善 3d 效果.

Updated demo here