آموزش های حرفه ای
مای دیزاین به عنوان یکی از تولید کنندگان محتوای آموزشی در زمینه طراحی وب و گرافیک به صورت تصویری، با کیفیت و اختصاصی در خدمت شما کاربران عزیز می باشد!
نرم افزار آندروید
طراحی و ساخت نرم افزار آندروید خدمت جدیدی است که در مای دیزاین ارائه میشود. داشتن نرم افزار برای گوشی های هوشمند امری جدید و هیجان انگیز می باشد!
طراحی وب و گرافیک
یکی از خدمات ما طراحی سایت های ایستا و پویا با جدید ترین متد های روز دنیاست. ساخت قالب هایی سبک و در عین حال زیبا، با استفاده از وردپرس، تخصص ماست!
خاصیت transform در سی اس اس

خاصیت transform در سی اس اس
سلام. امروز با آموزشی کاربردی از سی اس اس ۳ اومدم. یکی از ویژگی هایی که در طراحی سایت ها بسیار کاربرد دارد خاصیت transform میباشد. برای آشنایی با این ویژگی با من همراه باشید.
با استفاده از این خاصیت شما میتوانید جلوه های ویژه ای به عناصر وب سایت خود بدهید. این ویژگی چهار مقدار دارد که هر کدام یک افکت خاص را ایجاد میکند:

Transform: rotate(numberdeg)
Transform: skew(numberdeg)
Transform: scale(number)
Transform: translate(numberpx, numberpx)

حال به بررسی هر کدام میپردازیم:
– حالت اول که rotate نام دارد عنصر مورد نظر را با توجه به مقداری که به آن داده ایم در جهت عقربه های ساعت میچرخواند. برای مثال ما میخواهیم عنصری در صفحه به مقدار ۵۰ درجه چرخش داشته باشد:

.class {
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-o-transform: rotate(50deg);
transform: rotate(50deg);
}

– حالت دوم که skew نام دارد برای کجی و انحراف عناصر به کار می رود. برای مثال:

.class {
-webkit-transform: skew(50deg);
-moz-transform: skew(50deg);
-o-transform: skew(50deg);
 transform: skew(50deg);
}

– در حالت سوم که با نام scale شناخته میشود شما میتوانید عنصر خود را بزرگنمایی کنید. برای مثال ما تصویری داریم که میخواهیم طول و عرض آن با ضریب ۱٫۵ برابر نمایش داده شود:

.class {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}

– مقدار آخر که نام آن translate است شی مورد نظر را در دو جهت افقی و عمودی جابجا میکند. مقدار دهی به این ویژگی بسیار آسان است. داخب پرانتز دو مقدار میتوانید بدهید، مقدار اول در جهت افقی (محور x) و مقدار دوم در جهت عمودی (محور y) اعمال میشود. بهتر است مقادیر را بر حسب پیکسل (px) بنویسید. برای مثال شی ما ۲۰px در جهت افقی و ۱۰px در جهت عمودی جابجا میشود:

.class {
-webkit-transform: translate(20px,10px);
-moz-transform: translate(20px,10px);
-o-transform: translate(20px,10px);
transform: translate(20px,10px);
}

برای درک بهتر این خاصیت بهتر است مثال ها را انجام دهید. و برای زیبا شدن کار میتوانید این خاصیت را در قسمت hover عنصر خودتون اعمال کنید تا تفاوت را بهتر احساس کنید.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین محصولات فروشگاه
برخی مطالب تصادفی مای دیزاین
طرح لایه باز پرچم ۱۹۵ کشور صاف (flat)
طرح لایه باز برچسب های تگ در چهار رنگ
قرار دادن تصویر زمینه تمام صفحه سایت بدون مشکل
مجموعه ده آیکون سیستم عامل آندروید
اطلاع از پشتیبانی دستور CSS به کمک Support
حل مشکل فضای خالی بالای سایت وردپرس