css - محاكاة تحويل أصل باستخدام ترجمة




css3 css-transitions (2)

أريد محاكاة خصائص transform-origin transform: translate باستخدام transform: translate في CSS.

وفقًا لـ MDN ، هذا ممكن جدًا:

يتم تطبيق هذه الخاصية عن طريق ترجمة العنصر أولاً بواسطة القيمة السالبة للخاصية ، ثم تطبيق تحويل العنصر ، ثم الترجمة حسب قيمة الخاصية.

ومع ذلك ، عندما أحاول ، أحصل على نتائج غير صحيحة. من الواضح أن هذين المستطيلين ليسا متماثلين:

.origin {
  transform-origin: 100px 100px;
  transform: translate(100px, 0px) scale(2) rotate(45deg);
}

.translate {
  transform: translate(-100px, -100px) translate(100px, 0px) scale(2) rotate(45deg) translate(100px, 100px);
}

.box {
  background-color: red;
  width: 100px;
  height: 100px;
}

.container {
  float: left;
  margin: 100px;
  width: 250px;
  height: 250px;
  background-color: rgba(0, 0, 0, 0.1);
}
<div class="container">
  <div class="box origin">
  </div>
</div>

<div class="container">
  <div class="box translate">
  </div>
</div>

لقد حاولت البحث عن الإجابة بدون حظ لبعض الوقت الآن ، وفي رأيي يجب أن يكون الأمر بسيطًا نسبيًا ، لا يمكنني معرفة ذلك.


أنت جيد تقريبًا ولكن لديك خطأان. تحتاج إلى قلب الترجمات وتحتاج إلى تغيير transform-origin للترجمة الثانية.

إذا قمت بفحص الوثائق ، فسترى أن المرجع المستخدم لترجمة الأصل هو الزاوية العليا اليسرى من العنصر وأن القيمة الافتراضية لأصل التحويل هي center . لذلك نحن بحاجة إلى الحصول على نفس المرجع لكليهما.

.origin {
  transform-origin: 50px 50px;
  transform:  rotate(45deg) scale(2);
}
.translate {
  transform-origin:0 0; 
  transform:translate(50px, 50px) rotate(45deg) scale(2) translate(-50px, -50px);
} 
.box {
  background-color: red;
  width: 50px;
  height: 50px;
}
.container {
  display: inline-block;
  margin: 30px;
  width: 150px;
  height: 150px;
  background-color: rgba(0,0,0,0.1);
}
<div class="container">
  <div class="box origin">
  </div>
</div>
<div class="container">
  <div class="box translate">
  </div>
</div>

هنا من specification :

يتم حساب مصفوفة التحويل من خصائص التحويل وأصل التحويل كما يلي:

  1. ابدأ بمصفوفة الهوية.

  2. ترجمة بواسطة X و Y المحسوبة من أصل التحويل

  3. اضرب بكل من وظائف التحويل في خاصية التحويل من اليسار إلى اليمين

  4. ترجم بواسطة قيم X و Y المحسوبة سالبة الأصل المتحول

تحتاج إلى الانتباه إلى الصياغة! قد تجد أن MDN يتناقض مع المواصفات ، لكن الأمر ليس كذلك ببساطة لأن هناك فرقًا بين ترجمة العنصر (كما هو موضح في MDN) وترجمة أصل العنصر أو الإحداثيات المحلية (كما هو موضح في المواصفات) ).

على سبيل المثال ، ترجمة العنصر بمقدار -50 بكسل تعادل ترجمة الإحداثي المحلي (الأصل) بمقدار + 50 بكسل.

تحتاج أيضًا إلى الانتباه إلى "الضرب من اليسار إلى اليمين" لأنه قد يخلق البلبلة. إذا أشرنا إلى نفس المواصفات في المثال 3 لدينا:

div {
  height: 100px; width: 100px;
  transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
}

يقوم هذا التحويل بترجمة نظام الإحداثيات المحلي بمقدار 80 بكسل في كلا الاتجاهين X و Y ، ثم يطبق مقياسًا بنسبة 150٪ ، ثم دوران عقارب الساعة 45 درجة حول المحور Z. يمكن إدخال التأثير على تجسيد العنصر كتطبيق لهذه التحولات بترتيب عكسي : يتم تدوير العناصر ، ثم تحجيمها ، ثم ترجمتها.

لذلك لا يعني الضرب من اليسار إلى اليمين التقديم من اليسار إلى اليمين والذي يفسر بطريقة ما الحاجة إلى قلب الترجمة التي طبقتها لمحاكاة transform-origin :


لا يمكن محاكاة transform-origin بهذه السهولة باستخدام transform: translate . باستخدام transform-origin يمكنك تغيير مركز التحويلات ، لذلك يتم حساب التدوير وجميع التحويلات الأخرى بناءً على نقطة مختلفة.

ألقِ نظرة على المثال التالي من MDN مع transform-origin: 50px,50px . العنصر المدور هو أسفل الحافة السفلية للمربع المنقط حسب القيمة التي لا يمكن حسابها بسهولة. يمكنك ، بالتأكيد ، transform-origin المحاكاة مع transform: translate يلزم حساب transform: translate حسب القيم لمجموعة معينة من القيم.





css-transforms