4

I have an image (arrow.png), I would like to positioning it from left/right/top etc. and how do I rotate the image by a variable what has value from 0-360?

My PHP code

 <?php $degrees = 270;

    echo "<img src='arrow.png'>", "<div id='windfr'>";
    $rotate = imagerotate($degrees, 0); ?>

My CSS: 

<style>
  .windfr {
    z-index: 8;
    display: block;
    position:relative;
    left: 425px;
    top: 670px;
  }
</style>
Shazvan Hanif
  • 361
  • 3
  • 20
Bence
  • 97
  • 1
  • 8
  • 1
    If you really want to use PHP GD2 to manipulate the image, your `` has to call the PHP script that will generate this image. Keep in mind however that image processing is CPU intensive, this is not something you want to do in your web server. – Havenard Jun 24 '18 at 06:38
  • @Havenard - of course you want to do image manipulation on the server, but not on each request. The result should be saved somewhere – Philipp Jun 24 '18 at 07:39
  • @Philipp Well yeah, I meant, unless it's absolutely necessary. A simple rotation can be achieved with CSS or SVG, in fact there are lots of editing that can be done with SVG. Leave image processing to the client side whenever it is possible. Ideally the server should be processing trust sensitive operations only to optimize it's limited resources and responsiveness. – Havenard Jun 24 '18 at 20:25

2 Answers2

3

You can do that with CSS only:

img{
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari 3-8 */
    transform: rotate(20deg);
}

Obviously you can to change the degree of the rotation as you desire.

More info here: https://www.w3schools.com/cssref/css3_pr_transform.asp

Good luck!

Bögözi
  • 274
  • 2
  • 17
2
<?php
$degrees = 270;

echo "<img src='Asset 1.png' style='transform: rotate(".$degrees."deg);'>", "<div id='windfr'>";

?>
piet.t
  • 11,718
  • 21
  • 43
  • 52
Shazvan Hanif
  • 361
  • 3
  • 20
  • Thank you, the rotation is working but my code for positioning isnt. Maybe do you know what is wrong? – Bence Jun 24 '18 at 06:43
  • you can use `transform-origin` css property for positioning [example](https://stackoverflow.com/questions/15306032/css3-transform-rotate-text-fixed-position-left-and-right-vertically-centered) @Bence – Shazvan Hanif Jun 24 '18 at 06:47
  • 1
    Yes I tried and it works fine! Thank you :) – Bence Jun 26 '18 at 14:18