使用子元素旋转容器

<div class="container">
  <!-- 子元素 -->
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
</div>

.container {
  position: relative; /* 设置相对定位，使子元素相对于父容器进行定位 */
  width: 200px; /* 设置容器宽度 */
  height: 200px; /* 设置容器高度 */
  border: 1px solid #000; /* 设置容器边框 */
  perspective: 800px; /* 设置视距，影响旋转效果的立体感 */
}

.child {
  position: absolute; /* 设置绝对定位，使子元素相对于父容器进行定位 */
  width: 100%; /* 设置子元素宽度 */
  height: 100%; /* 设置子元素高度 */
  background-color: #ccc; /* 设置子元素背景颜色 */
  transform-origin: center center; /* 设置旋转中心点为子元素中心 */
  transition: transform 0.5s; /* 添加过渡效果，使旋转平滑 */
}

/* 鼠标悬浮时旋转子元素 */
.container:hover .child {
  transform: rotateY(180deg); /* 设置子元素绕Y轴旋转180度 */
}