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 پشتیبانی می کنند.