ویژگی transform در CSS

transform Property

ویژگی transform در CSS این امکان را می دهد تا با استفاده از توابع CSS همچون scale , rotate , skew و translate تغییراتی در اندازه، موقعیت و جهت نمایش عناصر اعمال کنیم.

ویژگی transform حرکتهای ۲ بعدی و ۳ بعدی را به عنصر اعمال می کند.

نحوه نوشتار

transform: rotate(20deg);
transform: perspective(20deg);
transform: translateX(3em);
transform: translateY(3rem);
transform: translate(50%,50%);
transform: scale(2.3);
transform: skew(45deg);
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);

مقدار ویژگی transform توسط توابع CSS زیر تعیین می شود که هر یک را در بخش مخصوص به خود مورد بررسی قرار داده ایم.

مقادیر

()scale
()rotate
()skew
()matrix
()translate
()scale
()rotate
()perspective

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<div class="box1">skew(30deg)</div>
<div class="box2">rotate(30deg)</div>
<div class="box3">scale(1.5)</div>
<div class="box4">matrix(1, 2, 3, 2)</div>

css

div {
    padding: 15px 30px;
    border: solid red;
    text-align: center;
    margin-top: 50px;
}
.box1 { 
    transform: skew(30deg); 
}
.box2 {
    transform: rotate(25deg); 
}
.box3 {
    transform: scale(1.5); 
}
.box4 {
    transform: matrix(1, 0, 2, 1, 0, 0); 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.