如何实现网页中图片的翻转效果？

你的代码存在两个关键问题，导致翻转效果无法正常工作：

• @keyframes 不能嵌套在 img 选择器内部，必须作为独立的CSS规则定义
• rotate3d() 语法错误：它的参数格式是 rotate3d(x轴权重, y轴权重, z轴权重, 旋转角度)，前三个参数是0-1之间的数值（用于定义旋转轴方向），第四个才是角度值，你把前三个参数都写成角度了，会导致旋转逻辑混乱

下面是修正后的代码，同时提供几种常见的翻转效果示例：

基础水平翻转（绕Y轴） #

body {
    background-color: pink;
    font-family: 'Courier New', Courier, monospace;
}

/* 独立定义动画规则 */
@keyframes flipHorizontal {
    0% {
        transform: rotate3d(0, 1, 0, 0deg);
    }
    100% {
        transform: rotate3d(0, 1, 0, 360deg); /* 绕Y轴完整旋转一周 */
    }
}

img {
    display: block;
    margin: 0 auto;
    /* 调用动画：名称 时长 速度曲线 循环方式 */
    animation: flipHorizontal 2s linear infinite;
}

垂直翻转（绕X轴） #

如果需要垂直方向的翻转，只需修改动画中的旋转轴参数：

@keyframes flipVertical {
    0% {
        transform: rotate3d(1, 0, 0, 0deg);
    }
    100% {
        transform: rotate3d(1, 0, 0, 360deg); /* 绕X轴完整旋转一周 */
    }
}

img {
    animation: flipVertical 2s linear infinite;
}

3D立体翻转（同时绕X+Y轴） #

想要更立体的翻转效果，可以同时指定X和Y轴的权重：

@keyframes flip3D {
    0% {
        transform: rotate3d(1, 1, 0, 0deg);
    }
    100% {
        transform: rotate3d(1, 1, 0, 360deg); /* 沿X+Y轴方向旋转 */
    }
}

img {
    animation: flip3D 2s ease-in-out infinite;
}

你还可以根据需求调整animation属性的参数：

• 将infinite改为forwards，可让动画停在最后一帧
• 修改2s数值调整动画时长
• 替换linear为ease/ease-in-out等缓动函数，改变动画节奏

内容的提问来源于stack exchange，提问作者Derp