آموزش CSS (فصل یازدهم – جلسه اول) : آشنایی با جلوه های ویژه ی CSS3

٢٩١٠٠ visibility ٣١ mode_comment

خاصیت transform  

شما میتوانید با استفاده از خاصیت transform  بر روی عناصر جلوه های ویژه ای را اعمال کنید ( در آخر خواهیم آموخت چگونه با استفاده از این خاصیت یه حالت انیمیشن به عناصر بدهیم.) این خاصیت سه مقدار دارد، و هر مقدار  برای یکی از جلوه ها به کار می رود.

قاعده کلی :

مقدار پیشفرض : none

Rotate  : برای چرخش اجزا به کار می رود.

Skew : برای کجی و انحراف عناصر به کار می رود

Scale : برای بزرگنمایی عناصر به کار می رود

در ادامه برای آشنایی با هر یک از مقادیر یک مثال میزنیم :

مقدار rotate

مثال :

کد css  :

نتیجه در مرورگر :

دقت کنید که حتما از پیشوندهای مرورگرها استفاده کنید تا در اجرای کد مشکلی پیش نیاید.

این مقدار از اعداد منفی نیز پشتیبانی می کند.

مقدار skew  

مثال :

کد css  :

نتیجه در مرورگر :

این مقدار از اعداد منفی نیز پشتیبانی می کند.

مقدار  scale

مثال :

کد css  :

عدد 1.5  به این معناس که عنصر عرض و ارتفاع عنصر 1.5   برابر افزایش یابد. (بزرگنمایی)

این مقدار از اعداد منفی نیز پشتیبانی می کند.  با این تفاوت که عنصر ما 360 درجه نیز تغییر زاویه خواهد داد.

بسیار خب،در جلسه دوم این فصل با خاصیت های transition و keyframe و طریقه ساخت یک انیمیشن آشنا خواهیم شد.

comment دیدگاه کاربران
programer2020

با سلام
این کد هایی که اول با – شروع میشه چیه؟
من حذفشون می کنم بازم کار می کنه پس چه کاربردی داره؟

کیوان علی محمدی

بله اکثرا توی نسخه های جدید مرورگر ها کار میکنن،اما بعضی از این ها لازمه حتما این پیشوند ها رو براش استفاده کنید تا توی اون مرورگر کار کنه.

Abbas412

سجاد جان ممنون از آموزش های خوبت
آقا من امتحان کردم، خاصیت scale مقادیر کمتر از 1، مثلا 0.5 هم میگیره و تصاویر رو کوچیک میکنه!

hamed_z2001

-webkit-transform: scale(1.5);
3
-moz-transform: scale(1.5);
4
-o-transform: scale(1.5);
الان این webkit و moz و o قبل از transform چی چیه؟؟ یکم گنگ بود.اگه میشه یکم توضیح بده دوست من … با تشکر

hamed_z2001

moz , o که فهمیدم پیشوند موزیلا و اپراست و اونیم که عادی نوشته شده حتما مال ie . وب کیت
مال چیه؟؟؟

لقمان آوند

وب کیت انجین پردازشی مرورگرهایی مثل کروم و سافاری هست .

سجاد دریس

چونکه هنوز مرورگرها از css3 به طور کامل پشتیبانی نمی کنند، برای کار کردن هر کدوم از خصوصیت های css3 در هر مرورگر ابتدا باید پیشوند هر مرورگر رو قبل از خصوصیت قرار بدین.
-webkit- برای مرورگر کروم و سافاری
-moz- برای مرورگر موزیلا فایرفاکس
-o- برای مرورگر اوپرا
-ie- برای مرورگر اینترنت اکسپلورر

hamed_z2001

ممنون از دوستان بابت جوابشون

artaj

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

سجاد جان من آیدی یاهوی شمارو اد کردم خوشحال میشم قبول کن
اینم اید من alonetaha69@yahoo.com
یک سوالی داشتم اینجا نمیشه پرسید
اگه میشه یا شمارتونو بدین یا تو یاهو باهم صحبت کنیم
منتظرم ➡

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2