CSS transformimet

2D

Me vetinë transform mund të kryhen transformimet vijuese 2-dimensionale:

  • translate()
  • translateX()
  • translateY()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

translate()

Me metodën translate() bëhet zhvendosja e një elementi nga pozita aktuale në një pozitë tjetër.

#teksti {
    width: 300px;
    height: 76px;
    background-color: lightyellow;
    padding: 8px;
    border: 4px solid black;
    transform: translate(150px, 100px);
}

https://gist.github.com/Alkimisti/b19afb19860bf2d3b2956c3002a9530f

https://codepen.io/tahir-hoxha/pen/XWjLXyo

translateX()

Me metodën translateX() bëhet zhvendosja horizontale e një elementi nga pozita aktuale në një pozitë tjetër.

#teksti {
    width: 300px;
    height: 76px;
    background-color: lightyellow;
    padding: 8px;
    border: 4px solid black;
    transform: translateX(150px);
}

https://gist.github.com/Alkimisti/713ec9d469d221902fd950d7da51e5d8

https://codepen.io/tahir-hoxha/pen/BaLgKYx

translateY()

Me metodën translateY() bëhet zhvendosja vertikale e një elementi nga pozita aktuale në një pozitë tjetër.

#teksti {
    width: 300px;
    height: 76px;
    background-color: lightyellow;
    padding: 8px;
    border: 4px solid black;
    transform: translateY(150px);
}

https://gist.github.com/Alkimisti/1007b3c6e4d8a8ed8e84840bbfd73acd

https://codepen.io/tahir-hoxha/pen/PoGrNRQ

rotate()

Metodarotate() bën rrotullimin e një elementi për shkallë të caktuar.

Vlerat pozitive bëjnë rrotullim në drejtim të akrepave të orës, ndërsa vlerat negative në drejtim të kundërt të akrepave të orës.

#teksti1 {
    width: 300px;
    height: 76px;
    background-color: lightyellow;
    padding: 8px;
    border: 4px solid #888888;
    transform: translate(350px, 150px) rotate(20deg);
}

#teksti2 {
    width: 300px;
    height: 76px;
    background-color: lightpink;
    padding: 8px;
    border: 4px solid #888888;
    transform: translate(50px, 50px) rotate(-30deg);
}

https://gist.github.com/Alkimisti/6ba55031950a32e2a658c2afe9a20751

https://codepen.io/tahir-hoxha/pen/xxEoZNo

scale()

Me metodën scale() bëhet rritja ose zvogëlimi i madhësisë së elementit.

#teksti {
    margin-top: 64px;
    text-align: center;
    width: 300px;
    height: 64px;
    background-color: lightyellow;
    border: 4px solid black;
    transform: scale(1, 2);
}

https://gist.github.com/Alkimisti/0d166db8556edd83cdfc767cdf2d4781

https://codepen.io/tahir-hoxha/pen/ExgBKjB

scaleX()

Me metodën scaleX() e rrisim ose zvogëlojmë gjerësinë e një elementi.

.teksti {
    margin-top: 64px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 300px;
    height: 64px;
    background-color: lightyellow;
    border: 4px solid black;
}

#teksti1 {
    transform: scaleX(0.8);
}

https://gist.github.com/Alkimisti/5ad7d4f46e3407ad2ec47296b6279425

https://codepen.io/tahir-hoxha/pen/zYKVqKg

scaleY()

Me metodën scaleY() e rrisim ose zvogëlojmë lartësinë e një elementi.

.teksti {
    margin-top: 64px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 300px;
    height: 64px;
    background-color: lightyellow;
    border: 4px solid black;
}

#teksti1 {
    transform: scaleY(2);
}

https://gist.github.com/Alkimisti/9d6e7f0d140c5ff5d75647887680257a

https://codepen.io/tahir-hoxha/pen/ZEpdWLZ

skewX()

Metoda skewX() bën pjerësimin e elementetit përgjatë boshtit horizontal të shprehur me shkallë.

Vlerat pozitive pjerrësojnë kah e majta, ndërsa ato negativet kah e djathta.

.teksti {
    margin-top: 64px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 300px;
    height: 64px;
    background-color: lightyellow;
    border: 4px solid black;
}

#teksti1 {
    transform: skewX(20deg);
}

#teksti2 {
    transform: skewX(-20deg);
}

https://gist.github.com/Alkimisti/01660fb1ef38a03cda32cf022577c50c

https://codepen.io/tahir-hoxha/pen/BaLgKRY

skewY()

Metoda skewY() bën pjerësimin e elementetit përgjatë boshtit vertikal të shprehur me shkallë.

Vlerat pozitive pjerrësojnë teposhtë, ndërsa ato negativet përpjetë.

 .teksti {
     margin-top: 64px;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
     width: 300px;
     height: 64px;
     background-color: lightyellow;
     border: 4px solid black;
}

#teksti1 {
    transform: skewY(20deg);
}

#teksti2 {
    transform: skewY(-20deg);
}

https://gist.github.com/Alkimisti/3538f87229e66509f34acc68b0ef3106

https://codepen.io/tahir-hoxha/pen/mdrZPBM

skew()

Metoda skew() bën pjerësimin e elementetit përgjatë boshtit horizontal dhe vertikal të shprehur me shkallë.

.teksti {
    margin-top: 64px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 300px;
    height: 64px;
    background-color: lightyellow;
    border: 4px solid black;
}

#teksti1 {
    transform: skew(20deg, 10deg);
}

#teksti2 {
    transform: skew(-20deg, -10deg);
}

https://gist.github.com/Alkimisti/7956c8b54cd0ae0c16c860b7a3b7513a

https://codepen.io/tahir-hoxha/pen/PoGrNOE

matrix()

Metoda matrix() kombinon në vete të gjitha 2D transformimet përnjëherësh.

Kjo metodë i ka gjashtë parametra, me anë të cilave mund të kryhet rrotullimi, rritja/zvogëlimi, zhvendosja dhe pjerrësimi.

The method combines all the 2D transform methods into one.

Parametrat janë me këtë radhitje:

  1. scaleX()
  2. skewY()
  3. skewX()
  4. scaleY()
  5. translateX()
  6. translateY()
#teksti {
    width: 300px;
    height: 76px;
    background-color: lightyellow;
    padding: 8px;
    border: 4px solid black;
    transform: matrix(1.4, 1, 0.6, 2, 200, 200);
}

https://gist.github.com/Alkimisti/9b68bd12995d8d2771ca6de7ebf19ff5

https://codepen.io/tahir-hoxha/pen/YzGoqJx

transform-origin()

Vetia transform-origin mundëson ndryshimin e pozitës së elementit të transformuar.

Marrë nga libri: https://leanpub.com/htmlcssjavascript