Question 40624 in PHP Question posted in
Official manual can be found here.

Use calculated php variable to rotate a class item in css

I am having troubles to transfer my calculated php variable (which gives an output form -90 –> 90) to my css bar class (for a gauge). All the code is defined in the same php file

I want to do it with te following :
.bar { position: absolute; width: 50%; height: 100%; background-color: var(--black); transform: rotate(<?php echo $degree; ?>deg)>;

Tis is inside the style element. The value of degree is calculated below the style element inside a p element.

Could anybody help me

Tags:

2

Answers


  1. 0

    You can generate a separate stylesheet with the dynamic value and then include it in your HTML.

    style.php

    <?php
header("Content-type: text/css; charset: UTF-8");
$dynamicValue = ''; // Dynamic value of $degree
?>
.bar {
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: var(--black);
  transform: rotate(<?php echo $dynamicValue; ?>deg);
}

    Then you need to include this stylesheet using the link element, like this.

    <head>
  <link rel="stylesheet" type="text/css" href="style.php">
</head>
    Login or Signup to reply.
  2. 0

    If you truly are "calculating it below", then CSS custom properties still work perfectly with this, you just use the value in your style, optionally with a default value, and then set the custom property value in the style attribute on the tag itself:

    <style>
    .bar {
        position: absolute;
        width: 50%;
        height: 100%;
        transform: rotate(var(--local-bar-transform, 0));
    }
</style>

<?php
$degree = -10;
?>

<p class="bar" style="--local-bar-transform: <?php echo $degree; ?>deg">Lorem ipsum</p>

    CodePen demo: https://codepen.io/cjhaas/pen/rNrgQoK

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search