HTML و CSS

آموزش برنامه نویسی Transform – CSS در CSS

درود
در CSS3

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

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

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

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

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

()translate

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

(translateX(valueX

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

(translateY(valueY

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

()rotate

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

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

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

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

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

()scaleY

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

()skew

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

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

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

()skewX

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

()skewY

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

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

و بار دیگر خیلی ممنون که به وبسایت پنگوئن اومدید و وقت گران بهاتون در اختیار ما گذاشته اید.
تا درودی دیگر بدرود.

پاسخ دهید

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