css特效之父元素转动，子元素始终保持正的（公转不自转）

要实现父元素转动而子元素保持不动的效果，可以使用CSS的transform-style属性。该属性定义了子元素在3D空间如何呈现。当设置为preserve-3d时，子元素会保持其3D位置；当设置为flat（默认值）时，子元素将不保持其3D位置，而是像2D元素一样进行变换。

以下是实现这种效果的示例代码：

HTML:

<div class="parent">
  <div class="child">我是子元素</div>
</div>

CSS:

.parent {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  margin: 50px;
  perspective: 1000px; /* 设置透视，子元素才能保持3D位置 */
  animation: rotate 5s infinite linear;
  transform-style: preserve-3d; /* 设置子元素在3D空间内保持位置 */
}
 
.child {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: auto;
  transform: translateZ(50px); /* 子元素在Z轴上移动，以便于在父元素中居中 */
}
 
@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

在这个例子中，.parent是需要旋转的父元素，.child是不动的子元素。通过在父元素上设置transform-style: preserve-3d;，子元素就会保持在其3D空间内的位置，即使父元素进行旋转。同时，父元素通过animation实现了绕Y轴的旋转。