rotate3d ֆունկցիա

rotate3d ֆունկցիան սահմանում է տարրի պտույտ տվյալ անկյան տակ միաժամանակ X, Y, Z առանցքների նկատմամբ եռաչափ տարածության մեջ։ Օգտագործվում է transform հատկության հետ միասին։ Հատկության արժեքը անկյուն է ցանկացած անկյունների միավորներով։

Որպես արժեքներ ֆունկցիան ընդունում է 4 պարամետր, գրված ստորակետերով։ Առաջին երեք պարամետրերը սահմանում են վեկտորի առանցքը եռաչափ տարածության մեջ, որի նկատմամբ կիրականացվի պտույտը։ Չորրորդ պարամետրը սահմանում է պտտման անկյունը։

Շարահյուսություն

cssընտրիչ {
  transform: rotate3d(X, Y, Z, անկյուն);
}

Օրինակ

Այս օրինակում առանցքի վեկտորը կուղղվի էկրանի աջ վերին անկյունը.

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

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate3d(1, 1, 0, 180deg);
}

Результат:

Տես նաև