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

دسته بندی: آموزش
زمان مطالعه: 2 دقیقه
۱۰ اسفند ۱۳۹۱

فهرست محتوای این مقاله

خاصیت transform  

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

قاعده کلی :

Transform: rotate(numberdeg)
Transform: skew(numberdeg)
Transform: scale(number)

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

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

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

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

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

مقدار rotate

مثال :

<img src="images/7learn.png" width="400" height="153" />

کد css  :

img {
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-o-transform: rotate(50deg);
transform: rotate(50deg);
}

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

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

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

مقدار skew  

مثال :

<img src="images/7learn.png" width="400" height="153" />

کد css  :

img {
-webkit-transform: skew(50deg);
-moz-transform: skew(50deg);
-o-transform: skew(50deg);
transform: skew(50deg);
}

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

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

مقدار  scale

مثال :

<img src="images/7learn.png" width="400" height="153" />

کد css  :

img {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}

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

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

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

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

artaj

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

سجاد جان من آیدی یاهوی شمارو اد کردم خوشحال میشم قبول کن
اینم اید من [email protected]
یک سوالی داشتم اینجا نمیشه پرسید
اگه میشه یا شمارتونو بدین یا تو یاهو باهم صحبت کنیم
منتظرم ➡

hamed_z2001

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

سجاد دریس

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

hamed_z2001

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

hamed_z2001

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

لقمان آوند

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

Abbas412

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

programer2020

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

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

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

Sahar66

سلام وقتتون بخیر..
وقتیکه از مقدار های rotate and scale استفاده میکنم و توی مرورگر اجراشون میکنم، تصویری که برام میاد دقیقا برعکس تصویری هست که شما اجراشون کردین..
مشکل چیه؟

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

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

Sahar66

Sorry 😳
توی کد نویسیش اشتباه کردم..

ariaieboy

خیلی ممنون از اقا سجاد گل همچنان منتظر هستیم که کار این سی اس اس رو به پایان برسونی راستی یک قابلیتی هست تو سی اس اس که به جای 10 تا عکس یا هر چند تا عکس یک عکس ایجاد می کنی بعد از طریق کد سی اس اس به صورت جدا نشون می دی اون اسمش چی هست و ایا در این اموزش ها اومده اسمش رو یادم رفته

سجاد دریس

سلام.
ممنون و عذرخواهی مجدد از شما که منو شرمنده می کنید.،.
این قابلیت اسمش css sprint هست که کل تصاویری که در قالبمون استفاده میکنیم رو با هم در یک فایل ادغام میکنیم، سپس با استفاده از خاصیت background-position از تصاویر استفاده میکنیم..
اموزش این قابلیت در سری نیست، اما حتما آمورششو رو براتون میزارم.

یاس

سجاد جان
سایتت خیلی عالی بود خیلی کمکم کرد
اگه سوالی داشتم میتونم تواین سایت از شما بپرسم ؟ 😛 🙂 😀

ariaieboy

پس چی شد اموزش دوست عزیز اگر نمی تونید اماده کنید در عرض یک هفته نگید در عرض یک هفته اماده می شه 😆

سجاد دریس

سلام.
شرمنده، یه چندتا مشکل واسم پیش اومده که باعث این بدقولیا شده، سعی میکنم در اولین فرصت مطالب بعدی رو بذارم.

سجاد دریس

سلام.
من مطالبی که منتشر میکنم بیشتر از دانش خودم و کتاب CSS3 Cheat Sheet هست. و کمتر سراغ مرجع ها میرم.، اما موضوع و ترتیب مطالب بر اساس وبسایت w3schools هست.

mohammadali

با سلام ممکنه بفرمایید مطالبی را میفرمایید از کدوم سایته آیا؟ 🙂
http://www.w3schools.com/html/default.asp آیا؟
با تشکر

mohammadali

با سلام و عرض خسته نباشید
دست شما درد نکنه
امیدوارم موفق باشید

نیاز به لاگین

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