2D Transformation

මේ කියන්නේ css වල අපිට බාවිතා කරන්න පුළුවන් වැදගත් property එකක් ගැන..transform property එක..මේ property එක  බාවිතා  කරලා 2D හෝ  3D element එකකට  විවිද වෙනස්කම් කරන්න පුළුවන්.අපි මේකෙදි කතා කරන්නේ 2D Transformation ගැන..

මුලින්ම මේ වගේ වෙබ් පිටුවක් යොදාගන්නවා මේ transformation කරන්න.

1ඊළගට බලන්න ඕන දේ තමා vendor prefixes.ඒ කියන්නේ අපි මේ බාවිතා කරන්න හදන property එක අපේ web browser එකට support කරනවද කියන එක..ජනප්‍රියාම web browsers වල prefixes තමා මේ..4

chorome සහ opera වල නවතම සංස්කරණ සදහා -webkit- බාවිතා කරනවා.

Microsoft සදහා -ms-, Mozilla Firefox සදහා -moz-,opera වලට -o- prefixes බාවිතා කරනවා.

1.rotate

මුලින්ම අපි බලන්නේ rotate function එක බාවිතා කරන විදිහ.5

මේ function එකෙන් වෙන්නේ අපි ලබාදෙන අගයකට element එකේ මද්‍ය ලක්ෂය වටා rotate වෙන එක ..developer tools බාවිතා කරලා live preview බලන්න පුළුවන්..
6

 

 

 

 

 

ඒ වගේම rotate වෙන ලක්ෂය වෙනස් කරන්නත් පුළුවන්..transform-origin property එකෙන් තමා ඒ වැඩේ කරන්නේ.

32

 

 

 

මුලින්ම දෙන්න ඕන x අක්ෂයට අදාළ අගය ,ඊළගට y අක්ෂය..උදාහරණයක් විදිහට..32

 

 

 

 

 

 

 

 

2.translate

translate function එකෙන් වෙන්නේ අපි ලබාදෙන තැනකට element එක move වෙන එක..සාමාන්‍ය css position property එක සහ translate function එක අතර වෙනස තමා translate මගින් element එක move කරනකොට අනිත් elements වලට බලපෑමක් නොවීමයි…1

මෙහිදීත් මුලින්ම x අක්ෂයට අදාළ අගය සහ දෙවනුව y අක්ෂයට අදාල අගය දෙන්න ඕන.

3.skew

skew function එකෙන් වෙන්නේ අක්ෂයක් දිගේ rotate වෙන එක..මුලින්ම x අක්ෂය දිගේ සහ ඊළගට y අක්ෂය දිගේ rotate වෙනව .1

4.scale

scale function එකෙන් element එකේ ප්‍රමාණය වෙනස් කරගන්න පුළුවන්..width,height පිළිවෙලට තමා වෙනස් වෙන්නේ..මෙහිදී width එක 0.5 ක් සහ height එක දෙගුණයක් විශාල කරලා තියෙනවා..මේකේ වාසිය තමා child elements නැත්නම් අපි වෙනස් කරන element එක ඇතුලේ තියෙන අනිත් elements ඉබේම වෙනස් වෙන එක..උදාහරණයකට මෙහිදී text එක ඉබේම වෙනස් වෙලා තියෙනවා

1එකවර transforms හිහිපයක් බාවිතා කරන්න අවශ්‍යනම් එකම පේලියේ ඔක්කොම ලියන්න පුළුවන්.

1

 

Advertisements

One thought on “2D Transformation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s