3D图像旋转CSS [关闭]

Posted 2023-03-06

【中文标题】3D图像旋转CSS [关闭]

【英文标题】：3D Image rotation CSS [closed]

【发布时间】：2020-10-10 09:38:50

【问题描述】：

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

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

【问题讨论】：

你这里的飞机是什么意思？

@ridoansaleh 我已经更新了我的帖子，使其更清晰！感谢您的提示！

在 CSS X , Y , Z 中基本上有 3 种旋转类型，这一种是 Y 轴旋转的一部分..

【参考方案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>

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

【讨论】：

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