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

U ovom postu objašnjavamo kako da rotirate sliku putem CSS-a i korištenjem oznake <img>.

Rotiranje slike pomoću CSS-a

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

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

Gornji CSS kôd treba dodati u datoteku stila .css koja je povezana s HTML-om.
Na primjer, ako se vaša CSS datoteka naziva stranica.css i nalazi se u istom direktoriju kao i HTML datoteka, u element <head> možete uključiti sljedeći HTML:

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

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

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

By Lapan

ML Lapan je računalni geek, wordpress freelancer i gamer iz Bosne i Hercegovine. Ima 15 godina iskustva u radu na računaru, internetu, web lokacijama (najviše s Wordpress web stranicama). Po zanimanju je ekonomski tehničar, iako se trenutno ne bavi ovom vrstom posla. Na ovom blogu objavljuje gameplay snimke nekih igara koje voli igrati, te neke druge interesantne članke.

Komentariši

Vaša email adresa neće biti objavljivana. Neophodna polja su označena sa *

Svi Smo Bliski

Problem, pitanje, hitan slučaj?
Ne oklijevajte posjetiti centar za pomoć, Mi vam možemo pomoći.

Lapan
Naše web mjesto je omogućeno prikazivanjem internetskih oglasa našim posjetiteljima.
Onemogućite vaš blokator i kliknite na ovaj tekst.