scale3d()
💡
Scale3d - elementni fazoda ko'rsatilgan qiymatlar bo'yicha o'lchovini
o'zgartirish uchun ishlatiladi
50. 3D transforms
6
Umumiy ko'rinishi
selector-nomi
{
transform
:
scale3d
(
x-qiymat
,
y-qiymat
,
z-qiymat
);
}
Misol
<
style
>
.parent-box {
width: 500px;
height: 500px;
border: 5px solid blue;
}
.box {
width: 100%;
height: 100%;
transform: scale3d(2, 3, 4);
}
style
>
---------------------
<
div
class
="
parent-box
">
<
div
class
="
box
">
X o'qi bo'yicha 2, Y bo'yicha 3 va Z bo'yicha 4 barobarga kattalashtirish
div
>
div
>
💡
"Scale3d"ning yana scaleX, scaleY va scaleZ ko'rinishlari ham mavjud
scale3d()
The CSS function defines a transformation that resizes an element in 3D space. Because the amount of scaling
is defined by a vector, it can resize different dimensions at different scales. Its result is a data type. This scaling
transformation is characterized by a three-dimensional vector.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d()
scaleX
The CSS function defines a transformation that resizes an element
along the x-axis (horizontally). Its result is a data type. It modifies the
abscissa of each element point by a constant factor, except when
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-fu
nction/scaleX
50. 3D transforms
7
scaleY
The CSS function defines a transformation that resizes an element
along the y-axis (vertically). Its result is a data type. It modifies the
ordinate of each element point by a constant factor, except when the
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-fu
nction/scaleY
scaleZ
The CSS function defines a transformation that resizes an element along the z-axis. Its result is a data type.
This scaling transformation modifies the z-coordinate of each element point by a constant factor, except when
the scale factor is 1, in which case the function is the identity transform.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleZ
Resources:
https://www.tornado-studios.com/blog/what-3d-modeling
https://stock.adobe.com/ee/search?k=corner+wall
Dostları ilə paylaş: |