পরিচয়
HTML DOM Style transform প্রোপার্টি একটি HTML ডকুমেন্টের এলিমেন্টে ২D বা ৩D ট্রান্সফর্মেশন প্রয়োগ করতে এবং তার বর্তমান মান জানতে ব্যবহৃত হয়।
সিনট্যাক্স
মান ফেরত দেওয়া
object.style.transform
মান সেট করা
object.style.transform = "value"
প্রাপ্য মানসমূহ
| মান | ব্যাখ্যা |
|---|---|
| inherit | প্যারেন্ট এলিমেন্ট থেকে এই প্রোপার্টির মান উত্তরাধিকার সূত্রে পায়। |
| initial | এই প্রোপার্টির মান ডিফল্ট মানতে সেট করে। |
| none | কোনো ট্রান্সফর্মেশন প্রয়োগ করা হয় না। |
| transform-function | যেকোনো বৈধ ২D বা ৩D ট্রান্সফর্মেশন ফাংশন হতে পারে। |
| vertical | এলিমেন্টের উচ্চতা রিসাইজযোগ্য হিসেবে সেট করে। |
ট্রান্সফর্মেশন ফাংশনসমূহ
বৈধ ২D বা ৩D ট্রান্সফর্মেশন ফাংশনসমূহ নিচে তালিকাভুক্ত:
| ফাংশন | ব্যাখ্যা |
|---|---|
| matrix(n,n,n,n,n,n) | ৬টি মান যুক্ত ম্যাট্রিক্স ব্যবহার করে ২D ট্রান্সফর্মেশন নির্দিষ্ট করে। |
| matrix3d(n,n,n,n,etc ...) | ১৬টি মান যুক্ত ম্যাট্রিক্স ব্যবহার করে ৩D ট্রান্সফর্মেশন নির্দিষ্ট করে। |
| translate(x,y) | ২D ট্রান্সলেশন নির্দিষ্ট করে। |
| translate3d(x,y,z) | ৩D ট্রান্সলেশন নির্দিষ্ট করে। |
| translateX(x) | শুধু X-axis মান ব্যবহার করে ট্রান্সলেশন নির্দিষ্ট করে। |
| translateY(y) | শুধু Y-axis মান ব্যবহার করে ট্রান্সলেশন নির্দিষ্ট করে। |
| translateZ(z) | শুধু Z-axis মান ব্যবহার করে ট্রান্সলেশন নির্দিষ্ট করে। |
| scale(x,y) | ২D স্কেল নির্দিষ্ট করে। |
| scale3d(x,y,z) | ৩D স্কেল নির্দিষ্ট করে। |
| scaleX(x) | শুধু X-axis মান ব্যবহার করে স্কেল নির্দিষ্ট করে। |
| scaleY(y) | শুধু Y-axis মান ব্যবহার করে স্কেল নির্দিষ্ট করে। |
| scaleZ(z) | শুধু Z-axis মান ব্যবহার করে স্কেল নির্দিষ্ট করে। |
| rotate(angle) | ২D রোটেশন নির্দিষ্ট করে। |
| rotate3d(x,y,z) | ৩D রোটেশন নির্দিষ্ট করে। |
| rotateX(x) | শুধু X মান ব্যবহার করে রোটেশন নির্দিষ্ট করে। |
| rotateY(y) | শুধু Y-axis মান ব্যবহার করে রোটেশন নির্দিষ্ট করে। |
| rotateZ(z) | শুধু Z-axis মান ব্যবহার করে রোটেশন নির্দিষ্ট করে। |
| skew(x,y) | ২D স্কিউ নির্দিষ্ট করে। |
| skewX(x) | শুধু X-axis মান ব্যবহার করে স্কিউ নির্দিষ্ট করে। |
| skewY(y) | শুধু Y-axis মান ব্যবহার করে স্কিউ নির্দিষ্ট করে। |
| perspective(n) | ৩D ট্রান্সফর্মেশনের জন্য পერსপেক্টিভ ভিউ নির্দিষ্ট করে। |
উদাহরণ
নিচে HTML DOM Style transform প্রোপার্টির একটি উদাহরণ দেওয়া হলো:
<!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 transform Property Example</h1>
<div class="box"> </div>
<button onclick="add()" class="btn">Set transform</button>
<script>
function add() {
document.querySelector('.box').style.transform = "translate(10px,10px) rotate(10deg)";
}
</script> </body> </html>
আউটপুট
উপরের কোড নিচের আউটপুটটি উত্পন্ন করবে:
"Set transform" বাটনে ক্লিক করলে লাল বক্সে ২D ট্রান্সফর্মেশন প্রয়োগ হবে।
