如何将PHP计算的角度变量传递给CSS的.bar类实现旋转？

你的问题核心是PHP代码从上到下执行，当解析style标签里的<?php echo $degree; ?>时，下面p元素里的$degree还没被定义，自然拿不到值。给你三个实用的解决方法：

方法1：把变量计算移到style标签之前 #

这是最简单直接的方案，把$degree的计算逻辑提前到style标签输出之前，这样style里就能直接调用变量：

<?php
// 先在这里写$degree的计算逻辑，比如从数据库读取、公式计算
$degree = 30; // 替换成你的实际计算代码
?>
<style>
.bar { 
    position: absolute; 
    width: 50%; 
    height: 100%; 
    background-color: var(--black); 
    transform: rotate(<?php echo $degree; ?>deg);
}
</style>

<!-- 原来的p元素，这里可以直接复用已经计算好的$degree -->
<p><?php echo $degree; ?></p>

方法2：用JavaScript动态设置样式 #

如果$degree的计算逻辑必须放在style标签之后（比如依赖后续DOM元素或数据），可以用前端JS来动态修改样式：

<style>
.bar { 
    position: absolute; 
    width: 50%; 
    height: 100%; 
    background-color: var(--black);
}
</style>

<!-- 先输出p元素并计算$degree -->
<p><?php 
// 这里是你的计算逻辑
$degree = 45; // 示例值
echo $degree; 
?></p>

<script>
// 找到.bar元素，动态设置旋转角度
const barElement = document.querySelector('.bar');
barElement.style.transform = `rotate(<?php echo $degree; ?>deg)`;
</script>

方法3：给.bar元素用内联样式 #

把transform的样式直接写在.bar元素的style属性里，只要输出元素时$degree已经计算完成即可：

<!-- 先计算$degree -->
<p><?php 
$degree = -30; // 示例计算逻辑
echo $degree; 
?></p>

<!-- 内联设置transform样式 -->
<div class="bar" style="transform: rotate(<?php echo $degree; ?>deg)"></div>

<!-- 基础样式仍放在style标签里 -->
<style>
.bar { 
    position: absolute; 
    width: 50%; 
    height: 100%; 
    background-color: var(--black);
}
</style>

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