CSS3 – Transformation

                                                                   CSS3 — Transformation

السلام عليكم ورحمة الله وبركاته

ان شاء الله هنكمل مع بعض درس جديد وشيق جدا تكملة على الدروس الماضية

-: يحتوى هذا الدرس على اربعة مواضيع رئيسية

التكبير Scale -1

الدوران Rotate -2

الانحراف Skew -3

x و y التحكم فى محورى Translate -4

التكبير Scale -1

تتيح لك عمل تكبير لصورة او نص و هذا من خلال هذا الامر css3

-webkit-transform: scale(1.2);

– : كما عرفنا فى المقالات الماضية ان

-webkit —–> Chrome & safari

يعنى الكود اللى يكون فيه كدة يعمل على متصفحى جوجل كروم و سفارى وهناك بعض الاوامر للعمل على باقى المتصفحات سنتعرف عليها معا فى المثال الكامل

فتعنى تكبير الصورة بنسبة %20 من حجم الصورة الاصلى فى الاتجاهين الصادى والسينى scale(1.2)اما

الدوران Rotate-2

تتيح لك ايضا عمل دوران لصورة او نص و هذا من خلال هذا الامر css3

-webkit-transform: scale(1.2) rotate(+150deg);

هذا الامر يعنى انه يعمل دوران للصورة ب 150 درجة ف الاتجاه الموجب وهناك امر rotate(+150deg)

يعمل هذا الامر على الدوران حول المحور السينى فقط ومثله بالنسبة للمحور الصادىrotateX(+150deg)

الانحراف Skew-3

تتيح لك ايضا عمل انحراف لصورة او نص و هذا من خلال هذا الامر css3

-webkit-transform: scale(1.2) skew(+20deg, -10deg);

هذا الامر يستخدم لعمل انحراف لاحداثيات الصورة بدرجات معينة محورى السينى skew(+20deg, -10deg)

والصادى

x و y التحكم فى محورى Translate-4

لصورة او نص و هذا من خلال هذا الامر X ,Y تتيح لك ايضا التغير فى قيم ال css3

 -webkit-transform: scale(1.5) translate(20px, 40px);

—-Scale الناس هتيجى تقولى طب ايه الفرق بينه وبين ال

هنقول ان الفرق انى لما بقول اكبر واعمل اسكيل ف انا بيكون متاح ليا انى اكبر مرة ونص او الضعف وهكذا

فقط X فقط او محور ال Y انا بقدر اتحكم انى ازود محور ال translate لكن ف

لما يكونوا الاتنين موجب كدة معناها انى بزود من ناحية اليمين و اسفل والعكس … صحيح

وممكن تزود وتنقص حسب مالديزين اللى انت عايزه

وكدة نبقى عرفنا معنى كل موضوع وايه الناتج من استخدامه مش شرط طبعا اننا نستخدمهم كلهم فى مكان واحد لكن —

بنسخدمهم عشان نعمل ديزين كويس للموقع بتاعنا وغالبا ان اكثر ديزين بيجذب الانتباه اللى بيكون بسيط يعنى مش فيه

.الوان كتير ولا يكون فيه زخرفة كتير والشاطر اللى يعرف يوظف كل شئ بيتعلمه فى مكانه الصح

ودلوقتى هنبدا نشوف ازاى لما احط سطر الكود اللى فوق هيعمل الناتج دا وازاى استخدمه والمكان اللى هحط فيه الكود بتاعى

hover — Mouse Events بداية كدة ان الكود دا شغال على

يعنى مثلا لما اجى امشى بالماوس على صورة التاثيرات اللى ممكن تحصل انى احرك الصورة من مكانها او انى اكبرها عشان توضح او انى اغير اتجاها يعنى انى انقل الصورة من مكانها واغير فى احداثيات الصورة السينى والصادى

ذى معرفنا من المقالات السابقة ان كل متصفح له الامر اللى بيتنفذ عليه انا هشتغل على متصفح قوقل كروم يعنى عشان اللى حابب يطبق بايده

<head>

<style type="text/css">

#img1:hover{

-webkit-transform: scale(1.2);

}

</style>

</head>

<body>

<ul>

<img src="1.jpg" id="img1" width="130" height="130"/>

</ul>

</body>

وبعد ان انتهينا من معرفة كتابة الكود والتطبيق …….. اليكم هذا المثال كامل على الاربع مواضيع اللى اتكلمنا عنهم ممكن تحملوه من هنا

CSS3بعد ما طبقنا الكود وعرفنا بيشتغل ازاى وشوفنا المثال اللى معمول ب —

اللى سهلت علينا حاجات كتير جدا بتمنى تكونوا استفادتوا منه

🙂 وبكدة اكون وصلت لنهاية درسنا

🙂 فريق الديف ميكس يرحب باستفساراتكم واسئلتكم

,

  1. 9 articles in CSS/CSS3 from devmix « DevelopersMix's Blog

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: