JavaScript中Transform属性无法生效的问题求助

问题的核心在于<p>元素的默认布局特性：

• <p>默认是块级元素，宽度会撑满父容器。旋转90度后，元素的宽高会互换，但因为原本宽度占满容器，旋转后的效果会被容器限制，视觉上几乎看不到变化。
• 虽然transform支持块级元素，但这种满宽的布局会掩盖旋转效果，而color属性不受布局影响，所以能正常生效。

修复方案 #

给新创建的<p>元素设置display: inline-block（或让宽度适配内容），让元素尺寸由内部文本决定，这样旋转效果就能直观展现：

const element = document.getElementsByClassName("child");
const text = element[0].getElementsByTagName("p");
let replacement;

function pulsateText() {
  replacement = document.createElement("p");
  const node = document.createTextNode("replace");
  replacement.appendChild(node);
  element[0].appendChild(replacement);
  
  // 关键：设置inline-block让宽度适配内容
  replacement.style.display = "inline-block";
  replacement.style.transform = "rotate(90deg)";
  replacement.style.color = "red";
  // 可选：调整旋转基点和位置，优化显示效果
  replacement.style.transformOrigin = "top left";
  replacement.style.marginTop = "15px";
  
  text[0].style.opacity = "0";
}

element[0].addEventListener("mouseover", pulsateText);
element[0].addEventListener("mouseout", function() {
  replacement.remove();
  text[0].style.opacity = "1";
})

补充说明 #

• display: inline-block：让元素兼具行内元素的特性（宽度适配内容）和块级元素的特性（支持transform等属性）。
• transformOrigin：可选设置，用来改变旋转的基点（默认是元素中心），比如设为top left可以让元素以左上角为轴旋转，布局更可控。
• 如果不想用inline-block，也可以设置width: fit-content来让块级元素的宽度适配内容，同样能看到旋转效果。

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