关于css transform3d子元素恢复

Question

类似旋转木马的效果。但是我想每个面上展示的文字都是永远面朝屏幕的
反旋转的我子元素宽度变成0了，一开始感觉是转轴设定有问题，调了很多版都是0，不确定是不是这个问题。
取消转动效果试了，transform3d表示你的元素本来就没转，根本不睬我。

有木有大神写过类似的案例？求助啊~~~

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

/* 1. 先定义样式 */
#box {
    position: relative;
    width: 200px;
    height: 200px;
}

/* 2. 使用CSS变换来实现圆周运动 */
.box-rotator {
    animation: rotate 4s linear infinite;
}

/* 3. 定义动画 */
@keyframes rotate {
    from { transform: translate(0, -50deg); }
    to { transform: translate(-180deg, -50deg); }
}

<div id="box">
    <div class="box-rotator">文字</div>
</div>