3D图像旋转CSS

Question

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

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

Answer 1

您所需要的简化了：

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

首先，选择图像并将动画设置为具有任意名称的动画（旋转听起来可以旋转某些东西，但是选择所需的东西。spin是我选择的名称，1.2s是持续时间，但可以是毫秒，例如500ms或1200ms。

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

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

但是通过这种方式，您不能进行太多自定义，只能得到一个起点和终点。使用percentajes，您可以定义动画来执行许多不同的工作。

希望这对您有所帮助，并让我知道是否需要澄清一些内容。

Answer 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>

我希望这就是您的期望。.谢谢