css 以top为圆点。3D旋转

要实现以top为圆点的3D旋转效果，可以使用CSS的transform-style属性和transform属性。

首先需要将旋转元素包含在一个父元素中，并设置该父元素的perspective属性，以便在之后设置子元素的3D效果。

然后，使用transform-style属性将父元素设置为preserve-3d，以便在之后设置子元素的3D效果。

接下来，使用transform属性来设置子元素的3D旋转效果。

下面是一个简单的示例代码：

HTML代码：

<div class="rotate">
  <div class="rotate-item">
    <!-- 旋转元素 -->
  </div>
</div>

CSS代码：

.rotate {
  position: relative;
  perspective: 1000px;
}

.rotate-item {
  position: absolute;
  top: 0;
  left: 50%;
  transform-style: preserve-3d;
  transform: translateX(-50%) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transition: transform 0.5s ease-in-out;
}

.rotate:hover .rotate-item {
  transform: translateX(-50%) rotateX(60deg) rotateY(30deg) rotateZ(0deg);
}

在这个示例中，当鼠标悬停在父元素上时，子元素将开始3D旋转。你可以根据自己的需求来调整元素的大小、位置和旋转角度，以达到你想要的3D旋转效果。