آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

transform در CSS3

CSS

فصل چهارم : Properties در CSS

جلسه شانزدهم   : transform در CSS3

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

دوستان عزیز امروز میخوام بهتون خاصیت های transform رو آموزش بدم .

 

transform در CSS3

با استفاده از این خاصیت ، برای ایجاد افکت های زیبا دیگه نیازی به جی کوئری ندارید . خاصیت transform به شما این امکان و میده تا شما عناصرتون رو بچرخونید ، بزرگ و کوچیک کنید و … . حالا در مثال هایی که زده میشه به راحتی متوجه این موارد میشید .

 

قاعده دستوری transform

منظور از effect مقادیری هست که شما میتونید به transform بدید .

 

مقادیر خاصیت transform

با استفاده از این متدها و افکت ها شما میتونید عناصرتون رو بپرخونید ، برعکس کنید ، بزرگ یا کوچک کنید.

()translate

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

(translateX(valueX

این خاصیت فقط عنصر رو در جهت افقی جابجا میکنه .

(translateY(valueY

این خاصیت فقط عنصر رو در جهت عمودی جابجا میکنه .

 

()rotate

با استفاده از این متد میتونید عناصرتون رو بچرخونید . منظور از deg درجه هست که مقدارشو تعیین می کنید .

به عنوان مثال تصویر زیر ۹۰ درجه چرخیده :

1

(rotateX(180deg

عنصر رو بصورت عمودی میچرخونه و در ۱۸۰ درجه که قرار بگیره کاملا عنصر رو در حالت عمودی پشت و رو میکنه .

2

(rotateY(180deg

عنصر رو بصورت افقی میچرخونه و در ۱۸۰ درجه که قرار بگیره کاملا عنصر در حالت افقی پشت رو رو میشه .

3

 

()scale

با استفاده از این متد میتونید ابعاد عنصرتون رو بصورت افقی و عمودی افزایش بدید . در مثال بالا ما ابعاد عنصر رو در حالت افقی ۲ برابر و در حالت عمودی ۳ برابر افزایش دادیم .

به عنوان مثال ما یه تصویر ساده داریم :

printer

برای این تصویر متد transform : scale ( 1 , 3 ) رو لحاظ می کنیم ، حالا نتیجه رو ببینید :

4

()scaleX

این متد ابعاد عنصر رو در حالت افقی افزایش میده .

()scaleY

این متد ابعاد رو در حالت عمودی افزایش میده .

 

()skew

با استفاده از این متد میتونید عنصرتون رو در دو حالت افقی و عمودی بصورت ۳ سه بعدی بچرخونید .

اگر مقدار درجه ای که تعیین می کنید مثبت باشه عنصر به سمت راست و اگر منفی باشه عنصر به سمت چپ میچرخه .

به عنوان مثال ما یه باکس ساده داریم که برای این باکس متد transform : skew(10deg,10deg) رو لحاظ می کنیم :

5

میتونید با درجه ها بازی کنید و شکل های مختلفی دربیارید .

()skewX

این متد عنصر رو در حالت افقی میچرخونه .

()skewY

این متد عنصر رو در حالت عمودی میچرخونه .

 

پشتیبانی مرورگرها از خاصیت transform

خوب دوستان این جلسه آموزشی هم به اتمام رسید ، امیدوارم مورد استفادتون قرار گرفته باشه .

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • فرهاد

    باور نمیشه با سی اس اس میشه تصاویرو اینجوری کرد.

    جالب بود ! 🙂

  • منتظر

    سلام. قبلا یک مطلب در رابطه با استاندارد طراحی گرافیک در شبکه بندی یک صفحه وب خونده بودم. ولی الان پیداش نمی کنم؟ لینک مقاله اش یا اطلاعاتی در این زمینه می خوام.

  • hassany

    البته چرخش حول محور z هم هست:rotatez()

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟