CSS实现无链接section透视悬停效果不生效问题求解

原代码失效原因 #

• 伪元素未设置定位：.specs:before缺少position: absolute声明，配置的left/bottom/z-index定位属性全部不生效，渐变层无法正确附着在容器上
• 父容器未配置3D上下文：.specs没有设置相对定位、透视属性和溢出隐藏，旋转的渐变层会超出容器边界出现穿模
• 伪元素尺寸缺失：仅配置了height: 100%，未设置width: 100%，伪元素默认宽度为0，无法显示渐变内容
• 透视属性位置错误：原代码把perspective写在伪元素的transform里，应该配置在父容器上才能生成正确的3D透视空间

修正后完整代码 #

CSS代码 #

.specs {
  position: relative;
  perspective: 1000px;
  overflow: hidden;
  transition: 0.4s ease;
  isolation: isolate;
}
.specs::before {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: -1;
    content: '';
    transform: rotateX(90deg);
    transform-origin: bottom center;
    transition: all 0.4s cubic-bezier(0.2, 0, 0.15, 1);
    background-image: linear-gradient(-264deg, #52227f -50%, #ff004e 100%);
}
.specs:hover::before {
    opacity: 1;
    transform: rotateX(0);
}

注：isolation: isolate用来创建独立层叠上下文，避免伪元素被其他外部层级遮挡，不需要额外调整z-index即可保证区块内原有内容显示在渐变层上方。

HTML结构 #

原有结构无需修改，直接使用即可：

<section class="elementor-section elementor-inner-section specs">
  <!-- 区块原有内容保留在这 -->
</section>

参数调整说明 #

• 透视强度：修改.specs上的perspective值即可，数值越小透视拉伸效果越强，数值越大效果越平缓，参考效果用的数值在800-1200区间
• 动画速度：修改transition的时长参数即可调整翻转速度

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