Question

我正在尝试将手臂对象旋转到圆柱体顶部，该圆柱体以一定角度放置以获取整个对象的最大视角。

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

帮助我实现这一目标。谢谢...

.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

要使手臂具有3D外观，您需要在X轴上旋转-这是对您已经在做的Z轴旋转的补充。

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

请注意，这需要在几个地方进行更改-添加transform: rotate之前，所有现有的transform: rotateZ都需要更改为rotateX。

此外，您还可以通过向手臂的容器添加一些透视图来改善3d效果：

.circle-small {
  perspective: 75em;
}

我建议您尝试使用perspective（CSS行＃43）和rotateX（CSS行77和252-268）的数字来改善3d效果。

Updated demo here

Answer 2

我认为您正在寻找的是rotate3d()转换。您可以定义轴并使其围绕该轴旋转。

您可以这样给它

@keyframes rotatearm {
      0%  { -webkit-transform: rotate3d(0, 0.6, 1.3, 0deg) }
    100%  { -webkit-transform: rotate3d(0, 0.6, 1.3, 360deg) }
}

这些值可能看起来并不完美（我只是输入了一些看起来不错的值），但希望您能理解。您可以找到完美匹配的轴并进行设置。

以下是一个小提琴示例：jsfiddle

希望它会有所帮助：）

使用CSS或JS将物体旋转360度，使其具有一定的倾斜角度或椭圆形

2 个答案: