skewX()
- Data publikacji
- Ostatnio edytowano
Przeznaczenie funkcji skewX()
Za pomocą funkcji skewX()
możemy wykonać przekształcenie w przestrzeni 2D. Wspomniane przekształcenie polega na pochyleniu elementu HTML względem poziomej osi X.
Parametry funkcji skewX()
- Przykładowe zapisy
-
skewX(45deg)
skewX(-15deg)
skewX(0.3turn)
skewX(50grad)
skewX(1.8rad)
- x
-
Parametr
x
jest wymaganym parametrem funkcjiskewX()
. Parametrx
określa wielkość pochylenia elementu HTML względem poziomej osi X.
Występowanie funkcji skewX()
Przykład funkcji skewX()
transform:skewX(30deg);
Przykładowy element "div" został pochylony w lewo o kąt 30 stopni względem poziomej osi X, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z wartością w postaci funkcji "skewX()", w której to funkcji została użyta wartość "30deg".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
transform:skewX(30deg);
margin:0 auto;
width:300px;
height:120px;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
Interpretacja funkcji skewX()
-
tak
-
tak
-
tak
-
tak
-
tak, lecz od wersji 9
-
tak
Zobacz więcej informacji o interpretacji funkcji skewX().