HTML DOM Style transformOrigin প্রোপার্টি

পরিচয়

HTML DOM Style transformOrigin প্রোপার্টি একটি HTML ডকুমেন্টের এলিমেন্টে ২D বা ৩D ট্রান্সফর্মেশন প্রয়োগ করার সময় ট্রান্সফর্মেশনের המקור (origin) বুঝতে এবং সেট করতে ব্যবহৃত হয়।

সিনট্যাক্স

মান ফেরত দেওয়া

object.style.transformOrigin

মান সেট করা

object.style.transformOrigin = "value"

প্রাপ্য মানসমূহ

মান	ব্যাখ্যা
inherit	প্যারেন্ট এলিমেন্ট থেকে এই প্রোপার্টির মান উত্তরাধিকার সূত্রে পায়।
initial	এই প্রোপার্টির মান ডিফল্ট মানতে সেট করে।
x-axis y-axis z-axis	ক্রমশः x-axis, y-axis এবং z-axis দিকের沿ে ভিউ কোথায় রাখা হবে তা নির্ধারণ করে।

উদাহরণ

নিচে HTML DOM Style transformOrigin প্রোপার্টির একটি উদাহরণ দেওয়া হলো:

<!DOCTYPE html> <html> <head> <style> 
  body { 
    color: #000; 
    background: lightblue; 
    height: 100vh; 
    text-align: center; 
  } 
  .box { 
    background: lightcoral; 
    width: 200px; 
    height: 200px; 
    margin: 2rem auto; 
  } 
  .btn { 
    background: #db133a; 
    border: none; 
    height: 2rem; 
    border-radius: 2px; 
    width: 40%; 
    display: block; 
    color: #fff; 
    outline: none; 
    cursor: pointer; 
    margin: 1rem auto; 
  } 
</style> </head> <body> 
<h1>DOM Style transformOrigin Property Example</h1> 
<div class="box"> </div> 
<button onclick="add()" class="btn">Change transformOrigin</button> 
<script> 
  function add() { 
    document.querySelector('.box').style.transform = "translate(10px,10px) rotate(10deg)"; 
    document.querySelector('.box').style.transformOrigin = "0 0"; 
  } 
</script> </body> </html>

আউটপুট

উপরের কোড নিচের আউটপুটটি উত্পন্ন করবে:

HTML DOM Style transformOrigin প্রোপার্টি

"Change transformOrigin" বাটনে ক্লিক করলে লাল বক্সের ট্রান্সফর্মেশনের המקোর পরিবর্তন হবে।

HTML DOM Style transformOrigin প্রোপার্টি