css - ترجمة - transform.translate unity




تحويل CSS مع تغيير حجم العنصر (2)

اضطررت إلى تعديل التعليمات البرمجية الخاصة بي قليلاً من الأعلى.

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

هنا هو الارتباط Codepen العمل. لا تتردد في إخباري إذا كنت تستخدمها. شعرت أنه من الجيد أن نكتشف ذلك أخيراً.

https://codepen.io/cyansmiles/pen/bLOqZo

فرع فلسطين. أنا أشكرك codepen لإضافة CSS متحركة.

.box-wrap {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: auto;
  text-align: center;
  margin: 30px 10px;
  padding: 40px;
  background: yellow;
}

.box-wrap:before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  width: calc(100% - 80px);
  height: calc(100% - 80px);
  top: 40px;
  left: 40px;
}

.box {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  transform-origin: 50% 0;
  width: 300px;
  height: 150px;
  background: red;
  color: #fff;
}

.box.size-80 {
  background: red;
  transform: scale(0.8);
  margin: 0 calc((-300px * (1 - 0.8)) / 2) calc(-150px * (1 - 0.8));
}

.box.size-70 {
  background: blue;
  transform: scale(0.7);
  margin: 0 calc((-300px * (1 - 0.7)) / 2) calc(-150px * (1 - 0.7));
}

.box.size-60 {
  background: green;
  transform: scale(0.6);
  margin: 0 calc((-300px * (1 - 0.6)) / 2) calc(-150px * (1 - 0.6));
}

.box.size-50 {
  background: orange;
  transform: scale(0.5);
  margin: 0 calc((-300px * (1 - 0.5)) / 2) calc(-150px * (1 - 0.5));
}

//etc
<div class="box-wrap">
  <h1>This is a bunch of boxes!</h1>
  <div class="box size-50">
    <h1>Box at 50%</h1>
  </div>
  <div class="box size-60">
    <h1>Box at 60%</h1>
  </div>
  <div class="box size-80">
    <h1>Box at 80%</h1>
  </div>
  <div class="box size-70">
    <h1>Box at 70%</h1>
  </div>
  <div class="box size-50">
    <h1>Box at 50%</h1>
  </div>
  <div class="box size-60">
    <h1>Box at 60%</h1>
  </div>
  <div class="box size-50">
    <h1>Box at 50%</h1>
  </div>
  <div class="box size-60">
    <h1>Box at 60%</h1>
  </div>
  <div class="box size-80">
    <h1>Box at 80%</h1>
  </div>
  <div class="box size-70">
    <h1>Box at 70%</h1>
  </div>
  <div class="box size-50">
    <h1>Box at 50%</h1>
  </div>
  <div class="box size-60">
    <h1>Box at 60%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box">
    <h1>Box at 100%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-80">
    <h1>Box at 80%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-70">
    <h1>Box at 70%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-60">
    <h1>Box at 60%</h1>
  </div>
</div>

<div class="box-wrap">
  <div class="box size-50">
    <h1>Box at 50%</h1>
  </div>
</div>

لقد وجدت هذا: العرض / الارتفاع بعد التحويل

والعديد غيرها ، ولكن لا شيء ليس تماما ما أبحث عنه. ما أريده هو قياس شيء ما إلى 50٪ من حجمه (مع انتقال متحرك لطيف بالطبع) وإعادة ضبط تخطيط الصفحة إلى الحجم الجديد (المرئي) للعنصر. ما يبدو أنه يحدث بشكل افتراضي هو أن العنصر لا يزال يحتفظ بحجمه الأصلي في بنية التخطيط ، ويتم رسمه فقط مع التحويلات المصاحبة.

أريد من الأساس أن ينقر المستخدم على كتلة نصية (أو أي محتوى آخر) ، ثم يقوم بقياس هذا النص إلى 50٪ (أو أياً كان) من حجمه ويلتزم به في لوحة أدناه للإشارة إلى أنه تم تحديده. لا أريد مسافة 50٪ بيضاء حول العنصر بعد أن أقوم بنقله.

لقد حاولت إعادة ضبط الارتفاع / العرض ، ولكن ذلك يؤدي إلى خضوع العنصر نفسه لتخطيط جديد ، ثم يتم تطبيق المقياس على التخطيط الجديد ، ولا يزال هذا يترك لي مساحة بيضاء 50٪ بعد الانتهاء من كل شيء. يبدو رمز بلدي mozilla محددة (لالبساطة) مثل هذا:

<script type="text/javascript">
 function zap(e) {

  var height = e.parentNode.offsetHeight/2 + 'px';
  var width = e.parentNode.offsetWidth/2 + 'px';
  e.parentNode.style.MozTransform='scale(0.0)'; 
  e.parentNode.addEventListener(
    'transitionend', 
    function() { 
      var selectionsArea = document.getElementById("selected");
      selectionsArea.appendChild(e.parentNode);
      e.parentNode.style.MozTransform='scale(0.5,0.5)'; 
      e.parentNode.style.display = 'inline-block';
      e.parentNode.style.height = height;
      e.parentNode.style.width = width;
    },
    true) 
}
</script>

أنا حقا آمل أن لا أذهب إلى العبث مع الهوامش السلبية أو المواقع النسبية لتحقيق هذا ...

تحرير: منذ كتابة هذا وجدت سؤالا مشابها جدا مع لا تعليقات أو إجابات. إنه يختلف قليلاً لأنني لا أهتم به كونه حلًا خاصًا بـ html5 ، وأظن أن الحل إما غير موجود أو يكمن في CSS / javascript بغض النظر عن مستوى html.

مقياس / تكبير عنصر DOM والمساحة التي تحتلها باستخدام مقياس تحويل CSS3 ()

تعديل 2: (محاولة أخرى لا تعمل)

لقد جربت ذلك أيضًا ، ولكن يبدو أن وظائف النطاق والترجمة تتفاعل بطريقة تجعل من المستحيل التنبؤ بالموقف النهائي ... والتغير قبل التحويل لا يبدو كما لو كان التحويل ثم القياس. لسوء الحظ ، لا يتعلق الأمر فقط بتعديل الترجمة بواسطة عامل القياس ...

function posX(e) {
    return e.offsetLeft + (e.offsetParent ? posX(e.offsetParent) : 0)
}

function posY(e) {
    return e.offsetTop + (e.offsetParent ? posY(e.offsetParent) : 0)
}

function placeThumbNail(e, container, x, y, scale) {
    var contX = posX(container);
    var contY = posY(container);
    var eX = posX(e);
    var eY = posY(e);
    var eW = e.offsetWidth;
    var eH = e.offsetHeight;

    var margin = 10;
    var dx = ((contX - eX) + margin + (x * eW * scale));
    var dy = ((contY - eY) + margin + (y * eH * scale));

    // assumes identical objects     
    var trans = 'translate(' + dx + 'px, ' + dy + 'px) ';
    var scale = 'scale(' + scale + ',' + scale + ') ';
    e.style.MozTransform =  trans + scale ; 
}

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

لاحظ أيضًا أنه إذا كنت تستخدم scale + trans أعلى ، فإن النتيجة تختلف اختلافاً جذرياً.

التعديل 3: برزت مشكلات المواضع ... يتم تطبيق التحويلات بالترتيب المحدد ، scale(0.5,0.5) جوهريًا حجم البكسل إلى نصف ما كان في الأصل (ربما يلمح إلى كيفية تنفيذه داخليًا ). إذا وضعت المترجم أولاً ، فإن ترجمة أقل قليلاً / أكثر لحساب التغيير في موضع الزاوية العلوية اليسرى الناتجة عن المقياس ستؤدي المهمة ، ولكن إدارة موقع الكائنات وضبط التحويلات عندما يتغير dom في بطريقة معقولة لا يزال يلحق بي. هذا النوع من الخطأ يبدو خاطئًا لأنني أتحرك في اتجاه كتابة مخطط التنسيق الخاص بي في جافا سكريبت فقط للحصول على هذا التأثير.


المشكلة التي لاحظتها هي أنه عند تغيير مقاييس العناصر ، يقوم المتصفح بتغيير نسبة وحدات البكسل ، وليس مقدار وحدات البكسل. العنصر أصغر ولكنه لا يغير حجم البكسل الفعلي في DOM. بسبب ذلك لا أعتقد أن الحل CSS- فقط موجود.

أضع عنصرًا قابلاً للتحجيم في حاوية تحافظ على نسبة البكسل نفسها مثل باقي العناصر. باستخدام جافا سكريبت أنا ببساطة تغيير حجم الحاوية. لا يزال كل شيء يعتمد على تحويل CSS3: المقياس. ربما يمكن أن يكون رمز JS أكثر بساطة ، ولكنه الآن يدور حول الفكرة (مجرد دليل على المفهوم) ؛) أعوذ بمثالين: http://jsfiddle.net/qA5Tb/9/

HTML:

<div class="overall-scalable">
    <div class="scalable" scalex='0.5' scaley='0.5'>
        Nunc et nisi ante. Integer in blandit nisi. Nulla facilisi. Vestibulum vulputate sapien eget mauris elementum sollicitudin. Nullam id lobortis dolor. Nulla vitae nibh vitae sem volutpat pretium. Nunc et nisi ante. Integer in blandit nisi. Nulla facilisi. Vestibulum vulputate sapien eget mauris elementum sollicitudin. Nullam id lobortis dolor. Nulla vitae nibh vitae sem volutpat pretium.
    </div>
</div>

CSS:

.overall-scalable {width: 350px; height: 150px; overflow: hidden; -webkit-transition: all 1s;}
.scalable {color: #666; width: 350px; height: 150px; -webkit-transform-origin: top left; -webkit-transition: all 1s;}

JS:

$('button').click(function() {
    $('.scalable').each(function(){
        rescale($(this));
    })
});

function rescale(elem) {

    var height = parseInt(elem.css('height'));
    var width = parseInt(elem.css('width'));
    var scalex = parseFloat(elem.attr('scalex'));
    var scaley = parseFloat(elem.attr('scaley'));

    if (!elem.hasClass('rescaled')){
        var ratioX = scalex;
        var ratioY = scaley;
    }else{          
        var ratioX = 1;
        var ratioY = 1;
    }

    elem.toggleClass('rescaled');
    elem.css('-webkit-transform', 'scale('+ratioX +', '+ratioY+')');        
    elem.parent().css('width', parseInt(width*ratioX) + 'px');
    elem.parent().css('height', parseInt(height*ratioY) + 'px');
}​




css-transforms