Najlepszy samouczek CSS3 przekształcić pochodzenia mienia W 2024 r. W tym samouczku możesz dowiedzieć się Przykłady,Pomoc Browser,Atrybut definicje i instrukcje,gramatyka,

CSS3 przekształcić pochodzenia mienia

Przykłady

Zestaw Pozycję Elementy obrotowe:

div
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}

Spróbuj »

Pomoc Browser

Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji obiektu.

Natychmiast po -webkit- cyfrowego -ms- lub -moz- temu w uzasadnieniu przedrostka atrybutu pierwszy numer wersji przeglądarki.

属性
transform-origin
(two-value syntax)
36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
9.0
3.2 -webkit-
23.0
15.0 -webkit-
10.5 -o-
transform-origin
(three-value syntax)
36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
9.0
4.0 -webkit-
23.0
15.0 -webkit-

Atrybut definicje i instrukcje

przekształcić pochodzenia atrybut pozwala na zmianę położenia elementu konwersji.

Elementy konwersji 2D można zmienić X i osi Y elementy. Element konwersji 3D, można również zmienić element osi z.

Aby lepiej zrozumieć atrybut Transform pochodzenia, zobacz demo .

Uwaga: Ta właściwość musi najpierw przekształcić własności.

Wskazówka: Użytkownicy Safari / Chrome:Aby lepiej zrozumieć właściwości transformacji 3D można znaleźć prezentację .

Domyślnie: 50% 50% 0
Dziedziczenie: nie
Wersja: CSS3
Składnia JavaScript: object .style.transformOrigin = "20% 40%"


gramatyka

transform-origin:x-axis y-axis z-axis;

wartość opis
Oś x

Widok niestandardowy jest umieszczony gdzie oś X. Możliwe wartości:

  • lewo
  • centrum
  • prawo
  • długość
  • %
Oś y

Widok niestandardowy jest umieszczony w miejscu osi y. Możliwe wartości:

  • top
  • centrum
  • dolny
  • długość
  • %

Widok niestandardowy jest umieszczony gdzie oś. Możliwe wartości:

  • długość
CSS3 przekształcić pochodzenia mienia
10/30