transform-style

ویژگی transform-style تعیین می کند که فرزندان یک عنصر در فضای سه بعدی عنصر نگهدارنده یا همان پدرشان بمانند یا حالت دو بعدی داشته باشند.

فرض کنید می خواهید فرزندان عنصری که در فضای سه بعدی می باشد را نیز در فضای سه بعدی به حرکت در بیاورید. این ویژگی حالت سه بعدی عنصر پدر را برای فرزندان نیز حفظ می کند (preserve).

منظور از فرزندان فقط فرزندان مستقیم عنصر پدر هستند و نه نوه ها و نتیجه ها :)

این ویژگی یکی از مقادیر preserve-3d و flat را می پذیرد. مقدار preserve-3d به فرزندان عنصر نیز اجازه می دهد تا در فضای سه بعدی قرار بگیرند. اما مقدار flat باعث می شود تا فرزندان عنصر به حالت تخت (دو بعدی) در صفحه عنصر پدر رسم شوند, یعنی قادر به حرکت و جای گرفتن در راستای محور Z نخواهند بود.

نمونه زیر را در نظر بگیرد:

<div class="container">
  <div class="element">
    <img src="assets.css-tricks.ir/images/skull-love.png" alt="">
  </div>
</div>

عنصری که کلاس element دارد در فضای سه بعدی قرار دارد و در این فضا چرخانده می شود. حال می خواهیم عنصر img که فرزند مستقیم آن است, در فضای سه بعدی باقی بماند و قادر به چرخش سه بعدی باشد پس داریم:

.container {
    /* فعال کردن فضای سه بعدی */
    perspective: 800px;
}

.element {
    width: 100%;
    height: 400px;
    background-color: rgba(255, 255, 255, 0.8);
    /* transform */
    transform: rotateY(50deg);
    /* به فرزندان مستقیم این عنصر اجازه می دهد تا در فضای سه بعدی حرکت کنند */
    transform-style: preserve-3d;
}

.element img {
    transform: rotateX(-30deg);
}

مراقب باشید

لیست زیر ویژگی هایی با مقادیر خاص را نشان می دهد که اگر برای عنصری تعیین شوند, مرورگر باید تمام فرزندان آن عنصر را در حالت دو بعدی و تخت رسم کند و الا نمی تواند این ویژگی ها را برای عنصر تنظیم کند. پس در نتیجه اگر یکی از موارد زیر برای یک عنصر تعیین شود دیگر نمی توان از ویژگی transform-style برای آن عنصر استفاده کرد, چون این ویژگی ها, ویژگی transform-style را باز نویسی می کنند و تاثیر آن را از بین می برند:

• overflow با هر مقداری به غیر از visible
• filter با هر مقداری به غیر از none
• clip با هر مقداری به غیر از auto
• clip-path با هر مقداری به غیر از none
• isolation با مقدار isolate.
• mask-image با هر مقداری به غیر از none
• mask-box-source با هر مقداری به غیر از none
• mix-blend-mode با هر مقداری به غیر از normal

 
در دموی زیر با تغییر مقدار این ویژگی به flat تاثیر این ویژگی را مشاهده کنید:

See the Pen transform-style by Mojtaba Seyedi (@seyedi) on CodePen.

برای درک بهتر دمو به مطالب مربوط به transform و transform-origin و perspective مراجعه کنید.

پشتیبانی مرورگر ها