设计红色盒子（盒子内文本为“Web前端开发基础课程”）围绕x轴顺时针旋转180度，过渡效果自定义，完整代码

这里提供一个基于CSS3的实现过渡效果的完整代码：

HTML代码：

<div class="box">
  <div class="content">Web前端开发基础课程</div>
</div>

CSS代码：

.box {
  width: 200px;
  height: 200px;
  position: relative;
  perspective: 800px;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%) rotateX(0deg);
  transition: transform 1s ease-in-out;
}

.box:hover .content {
  transform: translate(-50%, -50%) rotateX(180deg);
}

解释：

- `perspective` 属性定义了透视视图的视距，用于实现 3D 效果，这里设置为 800px。
- `.content` 元素设置为绝对定位，并且通过 `transform-origin` 属性设置旋转中心点为元素的中心点。
- 初始状态下，`.content` 元素的旋转角度为 0 度，过渡效果为 1 秒的缓入缓出。
- 当鼠标悬停在 `.box` 元素上时，`.content` 元素的旋转角度变为 180 度，实现了围绕 x 轴顺时针旋转 180 度的效果。