没有办法(通常)在CSS中应用转换方向.但是,我们可以通过使用伪元素(或其他方法,如本示例如何使用渐变)来解决该限制.
通过使用最初具有0 的可见高度的伪元素,我们可以在链接悬停时从高处转换到期望的方向.这是最好的使用transform: scale
性能方面的原因,这意味着我们需要设置我们transform-origin
要bottom center
在这种情况下,以确保它从底部到顶部去.
这种方法可能是最通用的,使用非实体背景等,但确实需要伪元素或子元素.
该方法的CSS将是:
li { background: red; } a { position: relative; z-index: 1; } a::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: bottom center; background: blue; z-index: -1; transition: transform 0.3s; } a:hover::after { transform: scaleY(1); }
演示