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

transform در CSS3

در این جلسه ی آموزشی راجع به 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

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

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

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

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۳

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

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

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین