صفت transform در css

صفت transform در css تغییر شکل مکان یا وضعیت تگ html

در این مقاله از سایت آموزی در مجموعه آموزش های صفات سی اس اس به بررسی و تحلیل خاصیت transform در زبان CSS می پردازیم.

ویژگی کاربردی transform در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.

معرفی و کاربرد ویژگی transform در زبان طراحی سی اس اس

به کمک خاصیت transform در CSS3 می توانیم منجر به تغییر شکل یا تغییر مکان یا تغییر وضعیت یک عنصر html در فضای سه بعدی یا دوبعدی شویم.

به عنوان مثال از طریق ویژگی transform می توان اگر تگ html پدر در وضعیت سه بعدی انیمیشن قرار دارد، تگ های html فرزند را هم در وضعیت سه بعدی انیمیشن قرار داد.

مقادیر صفت کاربردی transform در زبان طراحی css

صفت transform که در زبان طراحی CSS3 معرفی شده است، 24 مقدار می پذیرد که منجر به تغییر شکل دو بعدی و سه بعدی می شوند، این مقادیر عبارتند از:

1. مقدار none
2. مقدار (matrix(n,n,n,n,n,n
3. مقدار (matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n
4. مقدار (translate(x,y
5. مقدار (translate3d(x,y,z
6. مقدار (translateX(x
7. مقدار (translateY(y
8. مقدار (translateZ(z
9. مقدار (scale(x,y
10. مقدار (scale3d(x,y,z
11. مقدار (scaleX(x
12. مقدار (scaleY(y
13. مقدار (scaleZ(z
14. مقدار (rotate(angle
15. مقدار (rotate3d(x,y,z,angle
16. مقدار (rotateX(angle
17. مقدار (rotateY(angle
18. مقدار (rotateZ(angle
19. مقدار (skew(x-angle,y-angle
20. مقدار (skewX(angle
21. مقدار (skewY(angle
22. مقدار (perspective(n
23. مقدار initial
24. مقدار inherit

مقدار none درون خاصیت transform در زبان سی اس اس

اگر خاصیت transform را برای یک عنصر html برابر با مقدار none قرار دهیم، در حقیقت می خواهیم هیچگونه تغییر شکل یا transform برای عنصر html مورد نظر اعمال نکنیم.

مقدار none به عنوان مقدار پیش فرض خصوصیت transform محسوب می شود.

[html] div {transform: none;} [/html]

صفت transform در css تغییر شکل مکان یا وضعیت تگ html

مقدار تابع (matrix(n,n,n,n,n,n درون خاصیت transform در زبان css

اگر خاصیت transform را برای یک عنصر html برابر با مقدار تابع (matrix(n,n,n,n,n,n قرار دهیم، در حقیقت می خواهیم ، تغییر شکل، تغییر مکان و یا تغییر وضعیت یک عنصر html را در داخل یک ماتریس دوبعدی تعریف کنیم. در این حالت می توانیم کدهای یک عملیات transform را به صورت یک ماتریس دو بعدی بیاوریم.

به مثال زیر که معادل کد transform یک ماتریس دوبعدی ساخته شده خوب دقت کنید:

[html] div {transform: rotate(45deg) translate(24px,25px);} [/html]

معادل کد transform ، ماتریس دو بعدی زیر بدست می آید:

[html] div {transform: matrix(0.707107, 0.707107, -0.707107, 0.707107, -0.707107, 34.6482);} [/html]

مقدار تابع (matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n درون خاصیت transform در زبان سی اس اس

اگر خاصیت transform را برای یک عنصر html برابر با مقدار تابع (matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n قرار دهیم، در حقیقت می خواهیم ، تغییر شکل، تغییر مکان و یا تغییر وضعیت یک عنصر html را در داخل یک ماتریس سه بعدی تعریف کنیم. در این حالت می توانیم کدهای یک عملیات transform را به صورت یک ماتریس سه بعدی بیاوریم.

[html] div {transform: rotate3d(-1, 9, 8, 10deg) translate3d(50px,5px, 200px);} [/html]

معادل کد transform ، ماتریس سه بعدی زیر بدست می آید:

[html] div {transform: matrix3d(0.984912, 0.114033, -0.130173, 0, -0.115906, 0.993236, -0.00687916, 0, 0.128509, 0.0218633, 0.991467, 0, 74.3678, 15.0405, 191.75, 1);} [/html]

محاسبه کدهای transform به صورت ماتریس بسیار پیچیده است، لذا برای محاسبه کد های transform به صورت ماتریس دو بعدی و سه بعدی از وبسایت اینترنتی meyerweb بهره ببرید.

مقدار تابع (translate(x,y درون خاصیت transform در زبان css

اگر خاصیت transform را برای یک عنصر html برابر با مقدار تابع (translate(x,y قرار دهیم، در حقیقت می خواهیم یک تگ html را در یک فضای دوبعدی و در راستای محور x و y از طریق خاصیت transform جابجا کنیم. مقادیر این تابع به صورت درصدی یا طولی تعیین می گردد.

مقدار اول درون تابع translate ، جابجایی در راستای محور x ها و مقدار دوم در تابع translate ، جابجایی در راستای محور y ها را نشان می دهد.

[html] div {transform: translate(100px 100px);} [/html]

صفت transform در css تغییر مکان یا وضعیت تگ html

در صورتی یک مقدار برای تابع translate در نطر بگیرید، این مقدار برای جابجایی عنصر html در راستای محور y ها منظور می شود و برای محور x ها مقدار صفر در نظر گرفته می شود.

[html] div {transform: translate(80px);} [/html]

مقدار تابع (translate3d(x,y,z درون خاصیت transform در زبان سی اس اس

اگر خاصیت transform را برای یک عنصر html برابر با مقدار تابع (translate3d(x,y,z قرار دهیم، در حقیقت می خواهیم یک تگ html را در یک فضای سه بعدی و در راستای محور x و y و z از طریق خاصیت transform جابجا کنیم. مقادیر این تابع به صورت درصدی یا طولی تعیین می گردد.

تعییر شکل در مکان عناصر html درون این تابع سه بعدی براساس بردار [ tx, ty, tz ] تعیین می شود. مقادیر این بردار برای مقدار tx معادل جابجایی عنصر در راستای محور x ها ، مقدار ty معادل جابجایی عنصر در راستای محور y ها ، مقدار tz معادل جابجایی عنصر در راستای فضای سه بعدی محور z ها را نشان می دهد.

مقادیر مثبت برای تگ html منجر به جابجایی عنصر در راستای مقادیر مثبت محور x و y و z بوده و مقادیر منفی برای تگ html منجر به جابجایی عنصر در راستای مقادیر منفی محور x و y و z می شود.

به مثال زیر در مورد تابع (translate3d(x,y,z خوب دقت کنید:

[html]
div#wrap-trans{
box-shadow: 8px 8px 28px 15px inset #d5d5d5;
width: 100%;
padding: 50px 0px;
border-radius: 18px;}
#tra-3d{
box-shadow: 3px 3px 32px 4px inset cadetblue;
background-color: blue;
margin: 0px auto;
width: 100px;
height: 100px;
border-radius: 18px;
transition: transform 1s ease;}
div:hover{
transform:translate3d(50px, 50px, 20px);
transition: transform 1s ease;}
[/html]

خروجی کد در مرورگر اینترنتی در مورد تابع (translate3d(x,y,z (بر روی باکس آبی موس را نگه دارید)

مقدار تابع (translateX(x درون خاصیت transform در زبان css

اگر خاصیت transform را برای یک عنصر html برابر با مقدار تابع (translateX(x قرار دهیم، در حقیقت می خواهیم یک تگ html را در یک فضای دوبعدی و در راستای محور x از طریق خاصیت transform جابجا کنیم. مقادیر این تابع به صورت درصدی یا طولی تعیین می گردد.

مقادیر مثبت برای تگ html منجر به جابجایی عنصر در راستای مقادیر مثبت محور x بوده و مقادیر منفی برای تگ html منجر به جابجایی عنصر در راستای مقادیر منفی محور x می شود.

به مثال زیر در مورد تابع (translateX(x خوب دقت کنید:

[html]
div#wrap-trans{
box-shadow: 8px 8px 28px 15px inset #d5d5d5;
width: 100%;
padding: 50px 0px;
border-radius: 18px;}
#tra-x{
box-shadow: 3px 3px 32px 4px inset cadetblue;
background-color: blue;
margin: auto 30px;
width: 100px;
height: 100px;
border-radius: 18px;
transition: transform 1s ease;}
div#tra-x:hover{
transform:translateX(670px);
transition: transform 1s ease;}
[/html]

خروجی کد در مرورگر اینترنتی در مورد تابع (translateX(x (بر روی باکس آبی موس را نگه دارید)

مقدار تابع (translateY(y درون خاصیت transform در زبان سی اس اس

اگر خاصیت transform را برای یک عنصر html برابر با مقدار تابع (translateY(y قرار دهیم، در حقیقت می خواهیم یک تگ html را در یک فضای دوبعدی و در راستای محور y از طریق خاصیت transform جابجا کنیم. مقادیر این تابع به صورت درصدی یا طولی تعیین می گردد.

مقادیر مثبت برای تگ html منجر به جابجایی عنصر در راستای مقادیر منفی محور y بوده و مقادیر منفی برای تگ html منجر به جابجایی عنصر در راستای مقادیر مثبت محور x می شود.

دلیل تفاوت در حرکت عناصر در راستای محور y ها نسبت به محور x ها در این است که نقطه صفر و شروع همه عناصر در دنیای وب گوشه سمت چپ و بالای آنها می باشد. لذا حرکت به سمت پایین در راستای محور y ها با مقادیر مثبت در نظر گرفته شده و حرکت به سمت بالا در راستای محور y ها با مقادیر منفی در نظر گرفته می شود.

صفت transform در css تغییر شکل مکان یا وضعیت تگ html

به مثال زیر در مورد تابع (translateY(y خوب دقت کنید:

[html]
div#wrap-trans{
box-shadow: 8px 8px 28px 15px inset #d5d5d5;
width: 100%;
padding: 50px 0px;
border-radius: 18px;}
#tra-y{
box-shadow: 3px 3px 32px 4px inset cadetblue;
background-color: blue;
margin:10px auto;
width: 100px;
height: 100px;
border-radius: 18px;
transition: transform 1s ease;}
div#tra-y:hover{
transform:translateY(50px);
transition: transform 1s ease;}
[/html]

خروجی کد در مرورگر اینترنتی در مورد تابع (translateY(y (بر روی باکس آبی موس را نگه دارید)

مقدار تابع (translateZ(z درون خاصیت transform در زبان css

اگر خاصیت transform را برای یک عنصر html برابر با مقدار تابع (translateZ(z قرار دهیم، در حقیقت می خواهیم یک تگ html را در یک فضای سه بعدی و در راستای محور z از طریق خاصیت transform جابجا کنیم. مقادیر این تابع به صورت درصدی یا طولی تعیین می گردد.

مقادیر مثبت برای تگ html منجر به جابجایی عنصر در راستای مقادیر مثبت محور z بوده و مقادیر منفی برای تگ html منجر به جابجایی عنصر در راستای مقادیر منفی محور z می شود.

به مثال زیر در مورد تابع (translateZ(z خوب دقت کنید:

[html]
div#wrap-trans{
box-shadow: 8px 8px 28px 15px inset #d5d5d5;
width: 100%;
padding: 50px 0px;
border-radius: 18px;}
#tra-z{
box-shadow: 3px 3px 32px 4px inset cadetblue;
background-color: blue;
margin:10px auto;
width: 100px;
height: 100px;
border-radius: 18px;
transition: transform 1s ease;}
div#tra-z:hover{
transform:perspective(500px) translateZ(150px);
transition: transform 1s ease;}
[/html]

خروجی کد در مرورگر اینترنتی در مورد تابع (translateZ(z (بر روی باکس آبی موس را نگه دارید)

مقدار تابع (scale(x,y درون خاصیت transform در زبان سی اس اس

اگر خاصیت transform را برای یک عنصر html برابر با مقدار تابع (scale(x,y قرار دهیم، در حقیقت می خواهیم یک تگ html را در یک فضای دو بعدی و در راستای محور افقی و عمودی یا x و y از طریق خاصیت transform از نظر ظاهری بزرگتر یا کوچک تر کنیم. مقادیر این تابع به صورت عددی و شامل دو مقدار است. که یکی در راستای افق و دیگری در راستای عمود منجر به بزرگی یا کوچکی اندازه ظاهری عنصر می گردد.

مقدار 1 برای تگ html عدم تغییر در اندازه ظاهری عنصر در راستای محور x و y را سبب می شود. مقادیر بیشتر از 1 تگ html را از نظر ظاهری به انداره بزرگتر و مقادیر کمتر از 1 تگ html را از نظر ظاهری به اندازه کوچک تر تغییر می دهد.

مقادیر مثبت برای تگ html منجر به جابجایی عنصر در راستای مقادیر مثبت محور x و y بوده و مقادیر منفی برای تگ html منجر به جابجایی عنصر در راستای مقادیر منفی محور x و y می شود.

به مثال زیر در مورد تابع (scale(x,y خوب دقت کنید:

[html]
div#wrap-trans{
box-shadow: 8px 8px 28px 15px inset #d5d5d5;
width: 100%;
padding: 50px 0px;
border-radius: 18px;}
#tra-sca{
box-shadow: 3px 3px 32px 4px inset cadetblue;
background-color: blue;
margin:10px auto;
width: 100px;
height: 100px;
border-radius: 18px;
transition: transform 1s ease;}
div#tra-sca:hover{
transform:scale(0.5 , 2);
transition: transform 1s ease;}
[/html]

صفت transform در css تغییر شکل مکان یا وضعیت تگ html

خروجی کد در مرورگر اینترنتی در مورد تابع (scale(x,y (بر روی باکس آبی موس را نگه دارید)

مقدار تابع (scale3d(x,y,z درون خاصیت transform در زبان سی اس اس

اگر خاصیت transform را برای یک عنصر html برابر با مقدار تابع (scale3d(x,y,z قرار دهیم، در حقیقت می خواهیم یک تگ html را در یک فضای سه بعدی و در راستای محور های x و y و z از طریق خاصیت transform از نظر ظاهری بزرگتر یا کوچک تر کنیم. مقادیر این تابع به صورت عددی و شامل سه مقدار است. که یکی در راستای افق و دیگری در راستای عمود و یکی در فضای سه بعدی محور Z ها منجر به بزرگی یا کوچکی اندازه ظاهری عنصر می گردد.

مقدار 1 برای تگ html عدم تغییر در اندازه ظاهری عنصر در راستای محور x و y و z را سبب می شود. مقادیر بیشتر از 1 تگ html را از نظر ظاهری به انداره بزرگتر و مقادیر کمتر از 1 تگ html را از نظر ظاهری به اندازه کوچک تر تغییر می دهد.

مقادیر مثبت برای تگ html منجر به جابجایی عنصر در راستای مقادیر مثبت محور x و y و z بوده و مقادیر منفی برای تگ html منجر به جابجایی عنصر در راستای مقادیر منفی محور x و y و z می شود.

به مثال زیر در مورد تابع (scale3d(x,y,z خوب دقت کنید:

[html]
div#wrap-trans{
box-shadow: 8px 8px 28px 15px inset #d5d5d5;
width: 100%;
padding: 50px 0px;
border-radius: 18px;}
#tra-sca3d{
box-shadow: 3px 3px 32px 4px inset cadetblue;
background-color: blue;
margin:10px auto;
width: 100px;
height: 100px;
border-radius: 18px;
transition: transform 1s ease;}
div#tra-sca3d:hover{
transform:scale3d(-1 , -2  , -1);
transition: transform 1s ease;}
[/html]

خروجی کد در مرورگر اینترنتی در مورد تابع (scale3d(x,y,z (بر روی باکس آبی موس را نگه دارید)

مقدار تابع (scaleX(x درون خاصیت transform در زبان css

اگر خاصیت transform را برای یک عنصر html برابر با مقدار تابع (scaleX(x قرار دهیم، در حقیقت می خواهیم یک تگ html را در یک فضای دو بعدی و در راستای محور افقی یا x از طریق خاصیت transform از نظر ظاهری بزرگتر یا کوچک تر کنیم. تنها مقدار این تابع به صورت عددی است. و در راستای افق منجر به بزرگی یا کوچکی اندازه ظاهری عنصر می گردد.

مقدار 1 برای تگ html عدم تغییر در اندازه ظاهری عنصر در راستای محور x را سبب می شود. مقادیر بیشتر از 1 تگ html را از نظر ظاهری به انداره بزرگتر و مقادیر کمتر از 1 تگ html را از نظر ظاهری به اندازه کوچک تر تغییر می دهد.

مقادیر مثبت برای تگ html منجر به جابجایی عنصر در راستای مقادیر مثبت محور x بوده و مقادیر منفی برای تگ html منجر به جابجایی عنصر در راستای مقادیر منفی محور x می شود.

به مثال زیر در مورد تابع (scaleX(x خوب دقت کنید:

[html]
div#wrap-trans{
box-shadow: 8px 8px 28px 15px inset #d5d5d5;
width: 100%;
padding: 50px 0px;
border-radius: 18px;}
#tra-scaX{
box-shadow: 3px 3px 32px 4px inset cadetblue;
background-color: blue;
margin:10px auto;
width: 100px;
height: 100px;
border-radius: 18px;
transition: transform 1s ease;}
div#tra-scaX:hover{
transform:scaleX(2);
transition: transform 1s ease;}
[/html]

خروجی کد در مرورگر اینترنتی در مورد تابع (scaleX(x (بر روی باکس آبی موس را نگه دارید)

مقدار تابع (scaleY(y درون خاصیت transform در زبان css

اگر خاصیت transform را برای یک عنصر html برابر با مقدار تابع (scaleY(y قرار دهیم، در حقیقت می خواهیم یک تگ html را در یک فضای دو بعدی و در راستای محور عمودی یا y از طریق خاصیت transform از نظر ظاهری بزرگتر یا کوچک تر کنیم. تنها مقدار این تابع به صورت عددی است. و در راستای عمود منجر به بزرگی یا کوچکی اندازه ظاهری عنصر می گردد.

مقدار 1 برای تگ html عدم تغییر در اندازه ظاهری عنصر در راستای محور y را سبب می شود. مقادیر بیشتر از 1 تگ html را از نظر ظاهری به انداره بزرگتر و مقادیر کمتر از 1 تگ html را از نظر ظاهری به اندازه کوچک تر تغییر می دهد.

مقادیر مثبت برای تگ html منجر به جابجایی عنصر در راستای مقادیر مثبت محور y بوده و مقادیر منفی برای تگ html منجر به جابجایی عنصر در راستای مقادیر منفی محور y می شود.

صفت transform در css تغییر شکل مکان یا وضعیت تگ html

به مثال زیر در مورد تابع (scaleY(y خوب دقت کنید:

[html]
div#wrap-trans{
box-shadow: 8px 8px 28px 15px inset #d5d5d5;
width: 100%;
padding: 50px 0px;
border-radius: 18px;}
#tra-scaY{
box-shadow: 3px 3px 32px 4px inset cadetblue;
background-color: blue;
margin:10px auto;
width: 100px;
height: 100px;
border-radius: 18px;
transition: transform 1s ease;}
div#tra-scaY:hover{
transform:scaleY(2);
transition: transform 1s ease;}
[/html]

خروجی کد در مرورگر اینترنتی در مورد تابع (scaleY(y (بر روی باکس آبی موس را نگه دارید)

مقدار تابع (scaleZ(z درون خاصیت transform در زبان css

اگر خاصیت transform را برای یک عنصر html برابر با مقدار تابع (scaleZ(z قرار دهیم، در حقیقت می خواهیم یک تگ html را در یک فضای سه بعدی و در راستای محور Z ها از طریق خاصیت transform از نظر ظاهری بزرگتر یا کوچک تر کنیم. تنها مقدار این تابع به صورت عددی است. و در راستای محور Z منجر به بزرگی یا کوچکی اندازه ظاهری عنصر می گردد.

مقدار 1 برای تگ html عدم تغییر در اندازه ظاهری عنصر در راستای محور z را سبب می شود. مقادیر بیشتر از 1 تگ html را از نظر ظاهری به انداره بزرگتر و مقادیر کمتر از 1 تگ html را از نظر ظاهری به اندازه کوچک تر تغییر می دهد.

مقادیر مثبت برای تگ html منجر به جابجایی عنصر در راستای مقادیر مثبت محور z بوده و مقادیر منفی برای تگ html منجر به جابجایی عنصر در راستای مقادیر منفی محور z می شود.

به مثال زیر در مورد تابع (scaleZ(z خوب دقت کنید:

[html]
div#wrap-trans{
box-shadow: 8px 8px 28px 15px inset #d5d5d5;
width: 100%;
padding: 50px 0px;
border-radius: 18px;}
#tra-scaZ{
box-shadow: 3px 3px 32px 4px inset cadetblue;
background-color: blue;
margin:10px auto;
width: 100px;
height: 100px;
border-radius: 18px;
transition: transform 1s ease;}
div#tra-scaZ:hover{
transform: perspective(500px) scaleZ(2) translateZ(100px);
transition: transform 1s ease;}
[/html]

خروجی کد در مرورگر اینترنتی در مورد تابع (scaleZ(z (بر روی باکس آبی موس را نگه دارید)

مقدار initial درون صفت transform در زبان css

اگر خاصیت transform را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت transform در زبان سی اس اس

اگر خاصیت transform را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.

بررسی خاصیت transform از نظر نسخه زبان طراحی css

ویژگی کاربردی transform در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.

بررسی ساختاری صفت transform در زبان طراحی سی اس اس

عناوین ساختاری خاصیت transform	وضعیت ساختاری خاصیت transform
مقدار پیش فرض	none
قابلیت توارث	ندارد
قابلیت تحرک	دارد
ورژن css صفت	CSS3
سینتکس صفت در جاوا اسکریپت	"object.style.transform="rotate(7deg)

پشتیبانی مرورگرهای اینترنتی از صفت transform در زبان طراحی css

خاصیت css
transform 2D	36.0 به بالا و 4.0 تا 36.0 با -webkit-	10.0 به بالا و 9.0 تا 10.0 با -ms-	16.0 به بالا و 3.5 تا 16.0 با -moz-	9.0 به بالا و 3.2 تا 9.0 با -webkit-	23.0 به بالا و 15.0 تا 23.0 با -webkit- و 10.5 تا 23.0 با -o-
transform 3D	36.0 به بالا و 12.0 تا 36.0 با -webkit-	10.0	16.0 به بالا و 10.0 تا 16.0 با -moz-	9.0 به بالا و 4.0 تا 9.0 با -webkit-	23.0 به بالا و 15.0 تا 23.0 با -webkit-