3D 图像旋转 CSS

Question

下面post图像在屏幕平面中旋转CSS3 Rotate Animation，你能帮我看看如何使用[=19使图像旋转到页面平面中吗？ =]?

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

Answer 1

您需要的简化为：

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

首先，select图像并将动画设置为任意名称的动画（旋转听起来很适合旋转的东西，但请选择您想要的。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>

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

3D 图像旋转 CSS

3D Image rotation CSS

javascript

css

animation

image

rotation