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

cssselector {
  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:

html<div id="elem">lorem ipsum</div>

css#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:

html<div id="elem">lorem ipsum</div>

css#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:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: center bottom;
}
#elem:hover {
  transform: rotateX(-180deg);
}

Результат:

Se även