কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে স্টাইলকে ওয়েবেকিট-ট্রান্সফর্ম সেট করবেন?

Question

আমি -webkit-transform: rotate()জাভাস্ক্রিপ্টটি ডায়নামিকভাবে ব্যবহার করে সম্পত্তিটি পরিবর্তন করতে চাই , তবে সাধারণভাবে ব্যবহৃত setAttributeকাজ করছে না:

img.setAttribute('-webkit-transform', 'rotate(60deg)');

.styleপারেন কাজ করছে না ...

আমি কীভাবে এটি জাভাস্ক্রিপ্টে গতিশীল সেট করতে পারি?

Comments

আপনি কেবলমাত্র

— এটির

Answer 1

জাভাস্ক্রিপ্ট স্টাইলের নামগুলি WebkitTransformOriginএবংWebkitTransform

element.style.webkitTransform = "rotate(-2deg)";

ওয়েবকিটের জন্য এখানে ডিওএম এক্সটেনশন রেফারেন্সটি দেখুন ।

Comments

আপনি যদি আরও কিছু চান তবে একটি স্পেস দিয়ে আলাদা করুন উদাহরণস্বরূপ: element.style.webkitTransform = "rotate(-2deg) translateX(100px)";

— মার্ক

এটি সাফারি এবং ক্রোমে দুর্দান্ত কাজ করে তবে ফায়ারফক্সে কাজ করবে না। ফায়ারফক্সের জন্য এটি করার সমতুল উপায় কী?

— রিকার্ডো সানচেজ-সায়েজ

মোজট্রান্সফর্মটি আপনার বন্ধু হওয়া উচিত।

— হাজম্ম

@ ওলাফুর অ্যাপল লিঙ্কটি মারা গেছে।

— কারসিজেনেট

স্ট্রিং দিয়ে এটি করার একমাত্র উপায়। মনে হচ্ছে এটি পুনরাবৃত্ত হলে এটি বেশ ধীর হবে।

— বিবিসিঞ্জার

Answer 2

বেশিরভাগ সাধারণ বিক্রেতাদের জন্য এখানে জাভাস্ক্রিপ্ট নোটেশন রয়েছে:

webkitProperty
MozProperty
msProperty
OProperty
property

আমি ইনলাইন ট্রান্সফর্ম শৈলীর পুনরায় সেট করেছি:

element.style.webkitTransform = "";
element.style.MozTransform = "";
element.style.msTransform = "";
element.style.OTransform = "";
element.style.transform = "";

এবং jQuery ব্যবহার করে এটি পছন্দ করুন:

$(element).css({
    "webkitTransform":"",
    "MozTransform":"",
    "msTransform":"",
    "OTransform":"",
    "transform":""
});

জাভাস্ক্রিপ্ট (2012-03-21) সহ ব্লগ পোস্ট কোডিং ভেন্ডর উপসর্গ দেখুন ।

Comments

jQuery স্বয়ংক্রিয়ভাবে সঠিক উপসর্গ চয়ন করে, কেবল লিখতে হবে transform।

— ব্লেইস

@ ব্লাইজ এটি নতুন। কোন সংস্করণ থেকে শুরু?

— আর্মেল লার্সিয়ার

এটি jQuery 1.8.0 থেকে হয়। গিথুবকে প্রতিশ্রুতিবদ্ধ করুন

— ব্লেইস

win.style.transform ="translate(-50%)"কাজ করছে না

— মোমিন

Answer 3

ব্যবহার করার চেষ্টা করুন

img.style.webkitTransform = "rotate(60deg)"

Answer 4

আপনি যদি এটির মাধ্যমে এটি করতে চান তবে এটির মতো বৈশিষ্ট্যটি setAttributeপরিবর্তন করতে হবে style:

element.setAttribute('style','transform:rotate(90deg); -webkit-transform: rotate(90deg)') //etc

আপনি যদি অন্য সমস্ত ইনলাইন স্টাইলটি পুনরায় সেট করতে চান এবং কেবল আপনার প্রয়োজনীয় শৈলীর বৈশিষ্ট্যগুলির মানগুলি আবার সেট করতে চান তবে এটি বেশ সহায়ক তবে আপনি সম্ভবত এটি নাও চান। এজন্য প্রত্যেকেই এটি ব্যবহার করার পরামর্শ দিয়েছিল:

element.style.transform = 'rotate(90deg)';
element.style.webkitTransform = 'rotate(90deg)';

উপরের সমতুল্য

element.style['transform'] = 'rotate(90deg)';
element.style['-webkit-transform'] = 'rotate(90deg)';

Answer 5

আপনার 3 ডি অবজেক্টটি অ্যানিমেটেড করতে কোডটি ব্যবহার করুন:

<script>

$(document).ready(function(){

    var x = 100;
    var y = 0;
setInterval(function(){
    x += 1;
    y += 1;
    var element = document.getElementById('cube');
    element.style.webkitTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for safari and chrome
    element.style.MozTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for firefox
},50);
//for other browsers use:   "msTransform",    "OTransform",    "transform"

});

</script>