Kép elforgatása CSS effektel

Kép elforgatása CSS effektel

CSS használatával látványos effekteket adhatunk (többek között) a weboldalainkon használt képekhez. Ebben a rövid tutorialban leírom, hogyan lehet néhány egyszerű css kóddal olyan effektet adni egy képhez, hogy az elforogjon, ha fölé visszük az egeret.

Először is néhány általános css kóddal megformázzuk a képet, melyhez az effektet akarjuk rendelni:

body {
background: #979696;
}

.kep {
border: 5px solid #fff;
float: left;
height: 186px;
width: 200px;
margin: 20px;
overflow: hidden;

-webkit-box-shadow: 3px 3px 3px #5a5a5b;
box-shadow: 3px 3px 3px #5a5a5b;
}

Nem fogok belemenni részletesen, hogy melyik rész pontosan mit jelent, feltételezem, hogy minimális css ismereteid vannak.

OK, ezután a kép elforgatását kell meghatározni:

.forgat {
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
-ms-transition: all 0.9s ease;
transition: all 0.9s ease;
}

.forgat:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}

A .forgat meghatározza, hogy milyen gyorsan forogjon el a kép, a .forgat:hover pedig, hogy milyen szögben.

Ezután már csak a html kódban kell használni.