ما سبب إستخدام transform-style: preserve-3d في هذه الحالة ؟في "css"

مصطفى اوريك · 24 سبتمبر 2021

السلام عليكم.

ما سبب إستخدام transform-style: preserve-3d في هذه الحالة ؟

تم التعديل في 25 سبتمبر 2021 بواسطة شرف الدين2
توضيح العنوان

شرف الدين حفني · 24 سبتمبر 2021

مرحباً, الخاصية transform-style:preserve-3d تجعل العنصر قابل أن يتعامل العناصر بداخله(children elements) معه بشكل ثﻻثي الأبعاد بدلاً من فقط التعامل مع سطحه, أُنظر إلى المثال التالي

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 100px;
  padding: 10px;
  border: 1px solid black;
}

#div2 {
  padding: 50px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  transform: rotateY(60deg);
}

#div3 {
  padding: 40px;
  position: absolute;
  border: 1px solid black;
  background-color: yellow;
  transform: rotateY(-60deg);

}
</style>
</head>
<body>

<div id="div1">
  <div id="div2">
     HELLO
 	 <div id="div3">world</div>
  </div>
</div>

</body>
</html>

ذلك المثال إن قمت بتشغيله عندك ستجد مربعين فوق بعضهم البعض, المربع الأب وهو div2 والمربع الثاني بداخله div3 أي أن المربع الأصغر div3 يتعامل مع المربع الكبير div2 على أنه سطح ثنائي الأبعاد, بينما بعد إضافة الخاصية للمربع الأب div2 ستجد العنصر الأصغر div3 بدلاً من أن يكون موضوع فوقه تعاملاً مع سطحه ثنائي الأبعاد, ستجده يعبر منه حيث قام بإعتباره جسم ثﻻثي الأبعاد وليس مجرد سطح

بالنسبة للمثال الذي قمت أنت بوضعه فإن قمت بإزالة الخاصية ستجد أن المربع الثاني المسمى back لن يظهر , سيظهر فقط المربع front

ما سبب إستخدام transform-style: preserve-3d في هذه الحالة ؟في "css"

السؤال

مصطفى اوريك

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

شرف الدين حفني

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية