تبدیل‌های دوبعدی (CSS 2D Transforms)
CSS این امکان را فراهم می‌کند تا عناصر را حرکت دهید، بچرخانید، بزرگ و کوچک کنید و یا تغییر شکل دهید.
روش‌های تبدیل دوبعدی (2D Transform)
در CSS می‌توانید از ویژگی transform استفاده کنید تا تبدیل‌های زیر را انجام دهید:
translate()– حرکت عنصرrotate()– چرخش عنصرscaleX()– تغییر اندازه عرضscaleY()– تغییر اندازه ارتفاعscale()– تغییر اندازه عرض و ارتفاعskewX()– انحراف در محور XskewY()– انحراف در محور Yskew()– انحراف در هر دو محورmatrix()– ترکیبی از تمامی این روش‌ها
روش translate()
روش translate() یک عنصر را از موقعیت فعلی‌اش جابجا می‌کند. دو پارامتر برای محور X و Y می‌گیرد.
مثال:
div {
transform: translate(50px, 100px);
}روش rotate()
روش rotate() عنصر را به زاویه مشخصی می‌چرخاند. برای چرخش در جهت عقربه‌های ساعت از مقادیر مثبت و برای چرخش در خلاف جهت از مقادیر منفی استفاده کنید.
مثال:
چرخش در جهت عقربه‌های ساعت:
div {
transform: rotate(20deg);
}چرخش در خلاف جهت:
div {
transform: rotate(-20deg);
}روش scale()
روش scale() اندازه یک عنصر را بر اساس عرض و ارتفاع تغییر می‌دهد.
مثال:
دو برابر کردن عرض و سه برابر کردن ارتفاع:
div {
transform: scale(2, 3);
}کاهش اندازه به نصف:
div {
transform: scale(0.5, 0.5);
}روش scaleX()
روش scaleX() فقط عرض یک عنصر را تغییر می‌دهد.
مثال:
div {
transform: scaleX(2);
}روش scaleY()
روش scaleY() فقط ارتفاع یک عنصر را تغییر می‌دهد.
مثال:
div {
transform: scaleY(3);
}روش skewX()
روش skewX() عنصر را در محور X به زاویه مشخصی انحراف می‌دهد.
مثال:
div {
transform: skewX(20deg);
}روش skewY()
روش skewY() عنصر را در محور Y به زاویه مشخصی انحراف می‌دهد.
مثال:
div {
transform: skewY(20deg);
}روش skew()
روش skew() عنصر را هم‌زمان در هر دو محور X و Y انحراف می‌دهد.
مثال:
div {
transform: skew(20deg, 10deg);
}روش matrix()
روش matrix() تمامی تبدیل‌های دوبعدی را در یک دستور ترکیب می‌کند و شش پارامتر دارد:
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}این پارامترها ترتیب زیر را دارند:
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام