آموزش طراحی وب

backface-visibility در CSS3

در این جلسه ی آموزشی در رابطه با خاصیت backface-visibility صحبت می کنیم .

CSS

فصل چهارم : Properties در CSS

جلسه هفدهم   : backface-visibility در CSS3

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

دوستان عزیز امروز میخوام بهتون خاصیت backface-visibility رو آموزش بدم .

 

backface-visibility در CSS3

زمانی که شما یک عنصر رو با خاصیت transform میچرخونید و پشت و روش می کنید ، میتونید با این خاصیت تعیین کنید که پشت عنصر چرخیده شده نمایش داده بشه یا نه ؟ حالا با مثال متوجه میشید .

این خاصیت دو مقدار hidden و  visible داره که با hidden پشت عنصر مخفی میشه و با visible پشت عنصر نمایان میشه . قابل ذکره که این خاصیت در صورتی به شما جواب میده که شما باکستون و چرخونده باشید ، در حالت عادی اصلا کار نمیکنه .

 

به عنوان مثال ما یه باکس قرمز رنگ داریم که در حالت عادی به شکل زیر هست :

 1

و یک باکس قرمز رنگ ساده رو نمایش میده . حالا ما یه نوشته داخل این باکس مینویسیم تا وقتی چرخوندیمش چرخش این باکس رو حس کنید .

 2

حالا این باکس رو میچرخونیم :

حالا نتیجه رو ببینید :

3

حالا باکس ما ۱۸۰ درجه چرخید و پشت و رو شد . در این قسمت ما میتونیم تعیین کنیم پشت باکس ما که در حال حاضر نمایان هست ، نمایش داده بشه یا مخفی بشه . برای این کار از خاصیت backface-visibility استفاده می کنیم . حالا ما تعیین می کنیم که مخفی کنه و نمایش نده :

حالا دیگه ما باکسی برای نمایش نداریم که بخوام بهتون نشون بدم 🙂 باکس ما مخفی شد ، در واقع پشت باکس ما که داشتیم میدیدیم مخفی شد و در نهایت باکسمون و مخفی کرد .

 

پشتیبانی مرورگرها از خاصیت backface-visibility

در حال حاضر فقط مرورگرهای زیر این خاصیت رو پشتیبانی می کنند :

IE10+ , Firefox , Chrome , safari , Opera15+

 

دوستان اینجا جلسه ی آموزشیمون به اتمام میرسه اما اگر سوال یا ابهامی براتون بوجود اومد حتما مطرح کنید .

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۳

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین