CSS 3D立方体旋转偏移问题：如何实现原地旋转？

我来帮你搞定这个3D立方体旋转偏移的问题！你的核心问题出在旋转原点（transform-origin）设置错误，加上父容器缺少明确尺寸，导致旋转中心没有落在立方体的几何中心上，才会出现旋转时向侧边滑动的情况。下面是具体的修复步骤和完整代码：

关键问题分析与修复 #

• 修正旋转原点：你之前给.spinner设置的transform-origin: 50% 0;是把旋转中心放在了容器的顶部边缘，而立方体的旋转中心应该是它的正中心。改成transform-origin: center center;（或者50% 50%）就能让旋转中心对准立方体的几何中心。
• 给父容器设置宽高：.spinner作为立方体面的父容器，没有明确宽高的话，transform-origin的百分比计算就没有基准。给它加上width: 300px; height: 300px;，让它的尺寸和每个立方体面一致，确保旋转中心准确。
• 优化容器定位：你之前用margin-left: 40%的固定百分比容易导致布局偏移，建议用flex的居中属性来更可靠地定位立方体。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .spinner div {
            position: absolute;
            display: inline-block;
            width: 300px;
            height: 300px;
            border: 2px solid rgb(0, 0, 0);
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
            text-align: center;
            font-size: 100px;
            line-height: 300px; /* 让数字垂直居中 */
        }
        .spinner .face1 { transform: translateZ(150px); background-color: blue; }
        .spinner .face2 { transform: rotateY(90deg) translateZ(150px); background-color: rgb(184, 187, 31); }
        .spinner .face3 { transform: rotateY(180deg) translateZ(150px); background-color: green; }
        .spinner .face4 { transform: rotateY(-90deg) translateZ(150px); background-color: red; }
        .spinner {
            animation: spincube 6s infinite linear; /* 加上linear让旋转更平滑 */
            transform-style: preserve-3d;
            transform-origin: center center; /* 修正旋转原点 */
            width: 300px;
            height: 300px; /* 设置父容器宽高 */
            position: relative; /* 确保绝对定位的子元素以它为基准 */
        }
        .center-screen {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            min-height: 100vh; /* 让容器占满视口高度 */
            margin: 0;
        }
        @keyframes spincube {
            from { transform: rotateY(0deg); }
            to { transform: rotateY(-360deg); }
        }
    </style>
</head>
<body>
    <div class="center-screen">
        <div class="spinner">
            <div class="face1">1</div>
            <div class="face2">2</div>
            <div class="face3">3</div>
            <div class="face4">4</div>
        </div>
    </div>
</body>
</html>

额外优化说明 #

• 给立方体面加上line-height: 300px让数字垂直居中，视觉效果更好。
• 动画加上linear属性，让旋转速度保持均匀，不会出现快慢变化。
• 用min-height: 100vh让.center-screen占满整个视口高度，确保立方体在屏幕正中央。

这样修改后，你的3D立方体就能在原地平滑旋转，不会再出现侧边偏移的问题啦！

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