সিএসএস জেড-ইনডেক্স হারিয়ে গেছে ওয়েবকিট ট্রান্সফর্ম অনুবাদ 3 ডি পরে

Question 1

আমার দুটি একেবারে অবস্থিত ডিভ উপাদান রয়েছে যা ওভারল্যাপ করে। উভয়ই সিএসএসের মাধ্যমে জেড-সূচক মান নির্ধারণ করেছে। আমি translate3dস্ক্রিন থেকে এই উপাদানগুলি প্রাণবন্ত করতে ওয়েবকিট ট্রান্সফর্মটি ব্যবহার করি এবং তারপরে আবার স্ক্রিনে ফিরে যাই । রূপান্তরিত হওয়ার পরে, উপাদানগুলি তাদের সেট z-indexমানগুলিকে আর সম্মান করে না ।

আমি কোনও ওয়েবকিট তাদের উপর একবার রূপান্তর করলে ডিভ উপাদানগুলির জেড-ইনডেক্স / স্ট্যাক-অর্ডারের সাথে কী ঘটে যায় তা কি কেউ ব্যাখ্যা করতে পারেন? এবং ডিভ উপাদানগুলির স্ট্যাক-অর্ডার রাখতে আমি কী করতে পারি তা ব্যাখ্যা করুন?

আমি কীভাবে রূপান্তর করছি সে সম্পর্কে আরও কিছু তথ্য এখানে।

রূপান্তর করার আগে, প্রতিটি উপাদান সিএসএসের মাধ্যমে এই দুটি ওয়েবকিট রূপান্তর মানগুলি পায় (আমি .css()ফাংশন কলগুলি করতে jQuery ব্যবহার করছি :

element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });

এরপরে উপাদানটি অনুবাদ করা 3 ডি-ওয়েবেকিত-ট্রান্সফর্ম ব্যবহার করে অ্যানিমেটেড করা হয়:

element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });

বিটিডব্লিউ, আমি তৃতীয় প্যারামিটার সেট করার চেষ্টা করেছি translate3d ডি স্পেসে স্ট্যাক-অর্ডারটি প্রতিলিপি দেওয়ার চেষ্টা করতে কয়েকটি বিভিন্ন মানের করার চেষ্টা করেছি, তবে কোনও ভাগ্য নেই to

এছাড়াও, আইফোন / আইপ্যাড এবং অ্যান্ড্রয়েড ব্রাউজারগুলি আমার টার্গেট ব্রাউজার যা এই কোডটি চালানো দরকার। উভয়ই ওয়েবকিট রূপান্তর সমর্থন করে।

Question 2

এটি সম্পর্কিত হতে পারে: https://bugs.webkit.org/show_bug.cgi?id=61824

মূলত আপনি যখন z-axis এ 3 ডি ট্রান্সফর্ম প্রয়োগ করেন তখন z- সূচকের জন্য আর হিসাব করা যায় না (আপনি এখন একটি 3 মাত্রিক রেন্ডারিং প্লেনে এসেছেন, বিভিন্ন জেড-মান ব্যবহার করুন)। আপনি যদি শিশু উপাদানগুলির জন্য 2D রেন্ডারিংয়ে ফিরে যেতে চান তবে ব্যবহার করুন transform-style: flat;।

Question 3

এটি সম্ভবত স্যামি-ডিলাক্স দ্বারা চিহ্নিত বাগের সাথে সম্পর্কিত। এটি কেবল এমন কোনও উপাদানকে প্রভাবিত করবে যা পরম বা আপেক্ষিক হিসাবে অবস্থান করে। সমস্যাটির প্রতিকারের জন্য, আপনি নিম্নলিখিত সিএসের বিবৃতিটি প্রতিটি উপাদানকে প্রয়োগ করতে পারেন যা এইভাবে অবস্থিত এবং সমস্যা সৃষ্টি করছে:

-webkit-transform: translate3d(0,0,0);

এটি প্রকৃতপক্ষে কোনও রূপান্তর না করেই উপাদানটিতে রূপান্তরটি প্রয়োগ করবে, তবে এর রেন্ডার অর্ডারে প্রভাব ফেলবে যাতে এটি সমস্যার কারণী উপাদানটির উপরে।

Question 4

বিট লেট এটিতে তবে এমন উপাদানগুলিকে রাখার চেষ্টা করুন যা তাদের জেড-সূচকটি নীচে রেখে হারিয়েছে, সম্প্রতি কিছু প্যারালাক্স স্টাফ করার সময় আমার একটি সমস্যা হয়েছিল এবং এটি ব্যাপকভাবে সহায়তা করেছিল।

transform-style: preserve-3d;

এটি নির্বাণ সংরক্ষণ করে

transform: translate3d(0,0,0);

অন্যান্য উপাদানগুলিতে যা জিপিইউতে আরও চাপ দেয়

Question 5

অপেক্ষা করার অপেক্ষা রাখে উদাহরণটি

আপনি কি ট্রান্সফর্ম স্কেল করার চেষ্টা করেছেন (1)? আমার মনে আছে এটি একই রকম সমস্যা ছিল এবং আমাকে উপাদানগুলির এইচটিএমএল ক্রমটি পুনরায় সাজিয়ে নিতে হয়েছিল এবং রূপান্তরটি ব্যবহারের জেড-সূচক পরিবর্তিত হওয়ার কারণে আমার এটির প্রয়োজন হয়নি এমন রূপান্তরটি ব্যবহার করতে হয়েছিল।

যদি আমি ত্রুটি না হয়ে থাকি, প্রতিবার আপনি যখন ট্রান্সফর্ম ব্যবহার করেন, তখন এটি সর্বাধিক জেড-ইনডেক্সে উপলভ্য হয় এবং এটি ট্যাগটির শুরুতে এইচটিএমএলের নিকটতম উপাদান দ্বারা আদেশ করা হয়। সুতরাং নীচে থেকে।

আমি আশা করি যে এই সাহায্য

Question 6

z-index আপনি যদি স্ট্যাকযোগ্য উপাদানটির সাথে স্টাইল করেন তবে 3 ডি রূপান্তরিত ডিভগুলির বিরুদ্ধে কাজ করবে -webkit-transform: translateZ(0px);

কোডেপেনে স্নিপেট -> http://codepen.io/mrmoje/pen/yLIul

উদাহরণস্বরূপ, ঘূর্ণিত উপাদানগুলির (এই ক্ষেত্রে একটি আইএমজি) বিরুদ্ধে বোতামগুলি stack upএবং stack downফুটারের জেড-ইনডেক্স (+/- 1) বাড়াতে এবং নামিয়ে আনতে হবে।

Question 7

আপনি এখানে যে সমস্যার বর্ণনা দিয়েছেন তা আমি পুনরুত্পাদন করতে সক্ষম হইনি। আমি যাই করুক না কেন, জেড-ইনডেক্স মানটি সমস্ত রূপান্তরগুলিতে ধরে রাখা হয়। আমি ক্রোমিয়াম (গুগল ক্রোম) ব্যবহার করে পরীক্ষা করছি।

অনুবাদ 3 ডি ফাংশনের তৃতীয় আর্গুমেন্টটি এলিমেন্টের জেড-অক্ষটি পরিচালনা করে ulates ধারণাটি অনুরূপ তবে জেড-ইনডেক্সের মতো ঠিক নয় ... নিম্ন জেড-অক্ষ সহ উপাদানগুলি উচ্চ মানের সাথে উপাদানগুলির অধীনে।

আমি জানি আপনি নিজের তৃতীয় আর্গুমেন্টের মানগুলি চেষ্টা করে নিজের জেড-ইনডেক্সের সাথে মেলে, তবে সমস্যাটি হ'ল সিএসএস 3 অ্যানিমেশন চলাকালীন জেড-অক্ষগুলি পরিবর্তিত হবে বলে মনে হচ্ছে না। নিম্নলিখিত উদাহরণে, আটকানো উপাদানটি শীর্ষে থাকা উচিত তবে # এলিমেন্ট_এ শীর্ষে থাকবে।

যদি আমি নিয়মিত নির্বাচক এবং হোভার সিলেক্টর উভয়কেই জেড-ইনডেক্স যুক্ত করি তবে মনে হয় এটি কাজ করে এবং আটকানো উপাদানটিকে সর্বোচ্চ-সর্বাধিক হতে দেয়।

যদিও আপনি ঠিক যা খুঁজছিলেন তা না হলেও এই আচরণটি একটি সমাধান সরবরাহ করে। প্রাথমিক রেন্ডারিংয়ের জন্য অর্ডার সেট করতে আপনাকে কেবল অনুবাদ 3 ডি এবং জেড-ইনডেক্স ব্যবহার করতে হবে need

<style>
    div {
        width: 300px;
        height: 150px;
        background-color: white;
        border: 5px outset gray;
        float: left;
        margin: 20px;
        -webkit-transition: 2s;
    }

    #element_a {
        -webkit-transform: translate3d(0, 0, 50px);
    }
    #element_b {
        -webkit-transform: translate3d(0, 0, 100px);
    }

    #element_a:hover {
        -webkit-transform: translate3d(100px, 0, 60px);
    }

    #element_b:hover {
        -webkit-transform: translate3d(-100px, 0, -60px);
    }
</style>
<body>
    <div id="element_a">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
    </div>
    <div id="element_b">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
    </div>
</body>

Question 8

এর অন্য একটি উপায় হ'ল আপনি প্যারেন্ট উপাদান তৈরি করতে এবং এর সাথে সম্পর্কিত অন্যান্য সমস্ত রূপান্তরগুলি প্রয়োগ করতে পারেন:

# Apply transitions to a parent div
<div>
  # This image z-index -1 
  <img src="foo"/>

  # This image z-index -3
  <img src="bar"/>

  #This image z-index -2
  <img src="gg"/>
</div>

জেএসফিডাল