Funktionen rotateX
Funktionen rotateX specificerar en rotation kring
X-axeln i tredimensionellt utrymme. Används
tillsammans med egenskapen transform.
Värdet på egenskapen är en vinkel i någon av enheterna
för vinklar. Ett positivt värde roterar
mot oss, ett negativt - bort från oss. Rotationen utförs
runt en punkt, specificerad av egenskapen transform-origin.
Syntax
selector {
transform: rotateX(vinkel);
}
Exempel
I detta exempel kommer elementet att rotera
180 grader kring X-axeln vid hovring.
För mjuk rotation har egenskapen transition lagts till:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotateX(180deg);
}
:
Exempel
Låt oss ändra rotationsaxeln med hjälp av egenskapen
transform-origin:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateX(180deg);
}
:
Exempel
Ange en negativ vinkel:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateX(-180deg);
}
:
