50. 3D transforms Reja: 3D ???? 3D

---

50. 3D transforms
1
50. 3D transforms
Reja:
3D
💡
3D - geometrik model bo'lib elementimizni fazodagi joylashuvini aniqlash uchun 
3ta nuqtadan foydalaniladi
3D uchun misol

---

50. 3D transforms
2
3D Transform
💡
3D Transform - veb sahifamizdagi elementlarni uch o'lchovlik fazoda aylantirish, 
siljitish, o'lchovini o'zgartirish hisoblanadi
❗
2D va 3D "transform"lar uchun bir xil transform CSS xossasi ishlatiladi
3D transform uchun ishlatilinadigan "method"lar
rotate3d()
💡
Rotate3d - elementni fazoda ko'rsatilgan qiymatlar bo'yicha aylantirish uchun 
ishlatiladi
Umumiy ko'rinishi
selector-nomi
{
transform
:
rotate3d
(
x-qiymat
,
y-qiymat
,
z-qiymat
,
daraja
);
}

---

50. 3D transforms
3
Misol
<
style
>
.parent-box { 
width: 500px; 
height: 500px; 
border: 5px solid blue; 
} 
.box { 
width: 100%; 
height: 100%; 
transform: rotate3d(1, 2, -1, 30deg); 
} 
style
>
--------------------- 
<
div 
class
="
parent-box
">
<
div 
class
="
box
">
X o'qi bo'yicha 10, Y bo'yicha 20 va Z bo'yicha 30 darajaga aylantirish
div
>
div
>
💡
"Rotate3d"ning yana rotateX, rotateY va rotateZ ko'rinishlari ham 
mavjud
💡
Perspective - element foydalanuvchidan qanday uzoqlikda turganini belgilab 
beradi. Qiymat qancha kichik bo'lsa, foydalanuvchi elementga shuncha yaqin 
bo'ladi
<
style
>
.parent-box { 
width: 500px; 
height: 500px; 
border: 5px solid blue; 
} 
.box { 
width: 100%; 
height: 100%; 
transform: perspective(100px) rotate3d(1, 2, -1, 30deg); 
} 
style
>
--------------------- 
<
div 
class
="
parent-box
">
<
div 
class
="
box
">
X o'qi bo'yicha 10, Y bo'yicha 20 va Z bo'yicha 30 darajaga aylantirish
div
>
div
>

---

50. 3D transforms
4
rotate3d()
The CSS function defines a transformation that rotates an element around a fixed axis in 3D space, without 
deforming it. Its result is a data type. In 3D space, rotations have three degrees of liberty, which together 
describe a single axis of rotation.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d()
rotateX
The CSS function defines a transformation that rotates an element around the abscissa (horizontal axis) 
without deforming it. Its result is a data type. The axis of rotation passes through an origin, defined by the 
transform-origin CSS property. Note: Unlike rotations in the 2D plane, the composition of 3D rotations is usually 
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateX
rotateY
The CSS function defines a transformation that rotates an element around the ordinate (vertical axis) without 
deforming it. Its result is a data type. The axis of rotation passes through an origin, defined by the transform-
origin CSS property. Note: Unlike rotations in the 2D plane, the composition of 3D rotations is usually not 
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY
rotateZ
The CSS function defines a transformation that rotates an element around the z-axis without deforming it. Its 
result is a data type. The axis of rotation passes through an origin, defined by the transform-origin CSS 
property. Note: Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateZ