Kako rotirati sliku pomoću CSS-a i HTML-a

    Kako rotirati sliku pomoću CSS-a i HTML-a

    U ovom postu objašnjavamo kako rotirati sliku putem CSS-a pomoću oznake <img>.

    Rotirajte sliku pomoću CSS-a

    CSS kôd mora sadržavati kôd za konverziju za svaki glavni preglednik tako da se slika rotira u svim preglednicima.
    Slijedi primjer CSS koda koji se koristi za rotiranje slike za 180 stepeni.

    .rotate180 {
  -webkit-transform:rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

    Gornji CSS kod treba dodati u .css datoteku stila povezanu s HTML-om.
    Na primjer, ako se vaša CSS datoteka zove page.css i nalazi se u istom direktoriju kao i HTML datoteka, možete unijeti sljedeći HTML u element <head>:

    <link rel="stylesheet" href="page.css">

    Također možete kontinuirano umetati CSS kôd u oznaku stila koji se pojavljuje u oznaci slike ili atribut stila oznake slike.
    Nakon što primijenite CSS kôd na .css datoteku, listu stilova ili oznaku <style>, možete koristiti naziv CSS klase u bilo kojoj oznaci slike.

    <img src="https://www.mllapan.com/nekaslika.jpg" width="250" height="100" class="rotate180">