添加transform:rotate(-6deg)后WordPress页脚出现空白问题求助

问题场景 #

在WordPress用Elementor实现跑马灯文字，结构为section->column->inner section->column->heading：

• 内层section添加sliding-text类，复制后追加reverse类实现反向滚动
• 给.sliding-text .elementor-widget-wrap设置transform: rotate(-6deg)让文字倾斜后，页脚下方出现莫名空白，移除旋转样式空白就消失

问题根源 #

元素应用transform: rotate()后，浏览器对元素的占位区域计算会出现偏差——旋转后的元素实际占用的空间（尤其是上下边缘）超出了原容器的布局范围，导致页面底部被撑开多余空白。Elementor的容器自带的内外边距和定位逻辑会放大这个偏差。

可行解决方案 #

方案1：负外边距抵消占位偏差 #

给旋转的容器添加负margin，手动抵消旋转产生的额外占位：

.sliding-text .elementor-widget-wrap {
  transform: rotate(-6deg);
  /* 根据实际倾斜效果调整数值，比如上下各-20px，可微调 */
  margin-top: -20px;
  margin-bottom: -20px;
  /* 隐藏容器溢出部分，防止影响其他元素 */
  overflow: hidden;
}

方案2：用伪元素承载旋转（推荐） #

把旋转效果转移到伪元素上，让原容器保持正常文档流占位，避免布局偏移：

.sliding-text .elementor-widget-wrap {
  position: relative;
  overflow: hidden;
  /* 设一个最小高度，确保容器不会塌陷 */
  min-height: 80px; /* 按需改成你的文字容器高度 */
}

.sliding-text .elementor-widget-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 如果容器有背景色，需要继承 */
  background-color: inherit;
  transform: rotate(-6deg);
  z-index: -1; /* 把伪元素放在文字下方 */
}

/* 若文字也跟着容器旋转了，单独给文字加反向旋转修正 */
.sliding-text .elementor-heading-title {
  transform: rotate(6deg);
}

方案3：父容器限制溢出范围 #

给内层section（sliding-text类的容器）添加overflow: hidden，把旋转元素的溢出部分裁剪掉：

.sliding-text {
  overflow: hidden;
}

.sliding-text .elementor-widget-wrap {
  transform: rotate(-6deg);
  /* 可选：加一点内边距，防止文字被裁剪 */
  padding: 10px 0;
}

调试提示 #

• 调整数值时实时预览，确保文字没有被裁剪，同时页脚空白完全消失
• 反向滚动的sliding-text reverse类需要同步调整对应CSS规则

内容的提问来源于stack exchange，提问作者jasmine