Funkcja CSS skewX()

Definicja i użycie

CSS skewX() Funkcja używana do nachylenia elementu pod danym kątem wzdłuż osi x.

skewX() Funkcja w transform w użyciu atrybutu.

Wskazówka:skewX(a) Równoważne skew(a, 0)!

Przykład

Przykład 1

Użyj skewX() Najchyl kilka elementów <div> pod danym kątem wzdłuż osi x:

#myDiv1 {
  transform: skewX(15deg);
}
#myDiv2 {
  transform: skewX(30deg);
}
#myDiv3 {
  transform: skewX(-25deg);
}

Spróbuj sam

Przykład 2

Użyj skewX() Najchyl obraz wzdłuż osi x pod danym kątem:

#img1 {
  transform: skewX(25deg);
}
#img2 {
  transform: skewX(-25deg);
}
#img3 {
  transform: skewX(10deg);
}

Spróbuj sam

Gramatyka CSS

skewX(a)
Wartość Opis
a Wymagane. Kąt. Określa nachylenie wzdłuż osi x.

Szczegóły techniczne

Wersja: Moduł transformacji CSS poziom 1

Wsparcie przeglądarki

Tabela zawiera liczby oznaczające wersje przeglądarek, które w pełni wspierają tę funkcję.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Strony związane

Tutorial:Transformacje 2D CSS

Odnośnik:Atrybut transform w CSS

Odnośnik:Funkcja skew() w CSS

Odnośnik:Funkcja skewY() w CSS