3D图像旋转CSS [关闭]答案

【问题标题】：3D Image rotation CSS [closed]3D图像旋转CSS [关闭]
【发布时间】：2020-10-10 09:38:50
【问题描述】：

在下面的帖子中，图像在屏幕平面内旋转CSS3 Rotate Animation，您能帮我了解如何使用 CSS/JS 使图像旋转到页面平面内吗？

我添加了一个 gif 来显示我想要实现的旋转类型。

【问题讨论】：

你这里的飞机是什么意思？
@ridoansaleh 我已经更新了我的帖子，使其更清晰！感谢您的提示！
在 CSS X , Y , Z 中基本上有 3 种旋转类型，这一种是 Y 轴旋转的一部分..

标签： javascript css image animation rotation

【解决方案1】：

您需要的简化为：

.image{
    animation: spin 1.2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

首先，选择图像并将动画设置为具有任意名称的动画（旋转听起来适合旋转的东西，但选择你想要的。spin 是我选择的名称，1.2s 是持续时间，但它可以是 ms就像500ms 或1200ms。

然后，通过调用@keyframes animationName 来定义动画，然后每个属性都可以是一个百分号，或者像这样的 from/to 关键字：

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

但是通过使用这种方式，您无法自定义那么多，您只能获得一个起点和一个终点。使用 percentajes 你可以定义动画来做很多不同的事情。

我希望这对您有所帮助，如果需要澄清一些事情，请告诉我。

【讨论】：

感谢您的回答，它确实很有帮助，但它不是我正在寻找的轮换类型，我已经更新了我的帖子，以便更清楚。

【解决方案2】：

希望对您有所帮助-:

.coin{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: red;
        animation: animate 1s linear infinite;
        perspective: 800px;
    }
@keyframes animate {
    0%{
       transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(360deg);
    }
}

你需要在html文件中添加一个div -

<div class='coin'></div>

我希望这是你所期待的......谢谢

【讨论】：

如果您需要任何解释或进一步帮助..您可以询问。