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

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

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

backface-visibility در CSS3

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+

 

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

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

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

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • یاشار صفاری

    ممنون مفید بود

  • محمدامین

    خانم رحیمی شما خیلی استادی کارت خیلی خیلی درسته دمت گرم.

  • hassani

    خیلی واضح بود متوجه شدم
    فقط backface-visibility:hidden
    رو اصلاح کنین قسمت آخر گذاشته شده:
    backface-visibility:visible

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟