সিএসএস(৩) transform প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform(2D) | ৩৬.০ ৪.০ -webkit- |
১০.০ ৯.০ -ms- |
১৬.০ ৩.৫ -moz- |
৯.০ ৩.২ -webkit- |
২৩.০ ১৫.০ -webkit- ১০.৫ -o- |
| transform (3D) | ৩৬.০ ১২.০ -webkit- |
১২.০ | ১০.০ | ৯.০ ৪.০ -webkit- |
২৩.০ ১৫.০ -webkit- |
সংজ্ঞা ও ব্যবহার
ট্রান্সফর্ম প্রোপার্টি একটি এলিমেন্টের 2D ও অথবা 3D ট্রান্সফর্মেশন এর জন্য প্রযোজ্য ।এই প্রোপার্টি আপনি ঘোরাতে, স্কেল, সরাতে, তির্যক, ইত্যাদি করতে পারবেন ।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| none | না | হ্যাঁ । আরোও জানতে animatable অধ্যায় ভিজিট করুন। animatableএর উদাহরণ |
সিএসএস সিনট্যাক্স
transform: none/transform-functions/initial/inherit;
একটি আবর্তিত <div> এলিমেন্টঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css referance example</title>
<style>
div {
width: 200px;
height: 100px;
background-color: yellow;
/* Rotate div */
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
</style>
</head>
<body>
<div> হ্যালো </div>
<br>
<p><b> নোট:</b> ইন্টারনেট এক্সপ্লোরার ৮ এবং আগের ভার্সন গুলো ট্রান্সফর্ম প্রোপার্টি সাপোর্ট করে না । </p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object. style.transform="rotate(7deg)"উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>css referance example</title>
<style>
#myDIV {
margin: auto;
border: 1px solid black;
width: 200px;
height: 100px;
background-color: coral;
color: white;
}
</style>
</head>
<body>
<p> " উদাহরণ দেখুন " বাটনে ক্লিক করলে DIV এলিমেন্টটি ঘুরবে (rotate) :</p>
<button onclick="myFunction()">উদাহরণ দেখুন </button>
<div id="myDIV">
<h1>myDIV</h1>
</div>
<script>
function myFunction() {
// Code for Chrome, Safari, Opera
document.getElementById("myDIV").style.WebkitTransform = "rotate(20deg)";
// Code for IE9
document.getElementById("myDIV").style.msTransform = "rotate(20deg)";
document.getElementById("myDIV").style.transform = "rotate(20deg)";
}
</script>
<p><b> নোট:</b> ইন্টারনেট এক্সপ্লোরার ৮ এবং আগের ভার্শন গুলো ট্রান্সফর্ম প্রোপার্টি সাপোর্ট করা না । </p>
</body>
</html>
ফলাফল
transform প্রোপার্টির ভ্যালু-সমূহ
- none - এখানে কোনো ট্রান্সফর্মেশন করবে না।
- matrix(n,n,n,n,n,n) - ছয়টি ভ্যালু একটি ম্যাট্রিক্স ব্যবহার করে একটি 2D ট্রান্সফর্মেশন নির্ধারণ করা হয়েছে।
- matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) - ১৬ টি ভ্যালু একটি ৪x৪ ম্যাট্রিক্স ব্যবহার করে একটি 3D ট্রান্সফর্মেশন নির্ধারণ করা হয়েছে।
- translate(x,y) -একটি 2D অনুবাদ নির্ধারণ করে।
- translate3d(x,y,z) - একটি 3D অনুবাদ নির্ধারণ করে।
- translateX(x) - শুধুমাত্র X-অক্ষের ভ্যালু ব্যাবহার করে একটি অনুবাদ নির্ধারণ করে।
- translateY(y) - শুধুমাত্র Y-অক্ষের ভ্যালু ব্যাবহার করে একটি অনুবাদ নির্ধারণ করে।
- translateZ(z) - শুধুমাত্র Z-অক্ষের ভ্যালু ব্যাবহার করে একটি অনুবাদ নির্ধারণ করে।
- scale(x,y) - একটি 2D স্কেল ট্রান্সফর্মেশন নির্ধারণ করে।
- scale3d(x,y,z) -একটি 3D স্কেল ট্রান্সফর্মেশন নির্ধারণ করে।
- scaleX(x) - X-অক্ষের জন্য দেওয়া প্রদত্ত ভ্যালু দ্বারা একটি স্কেল ট্রান্সফর্মেশন নির্ধারণ করে।
- scaleY(y) - Y-অক্ষের জন্য দেওয়া প্রদত্ত ভ্যালু দ্বারা একটি স্কেল ট্রান্সফর্মেশন নির্ধারণ করে।
- scaleZ(z) -Z-অক্ষের জন্য দেওয়া প্রদত্ত ভ্যালু দ্বারা একটি 3D স্কেল ট্রান্সফর্মেশন নির্ধারণ করে।
- rotate3d(x,y,z,angle) - একটি 3D ঘূর্ণন নির্ধারণ করে।
- rotateX(angle) -X-অক্ষ বরাবর একটি 3D ঘূর্ণন নির্ধারণ করে।
- rotateY(angle) - Y-অক্ষ বরাবর একটি 3D ঘূর্ণন নির্ধারণ করে।
- rotateZ(angle) - Z-অক্ষ বরাবর একটি 3D ঘূর্ণন নির্ধারণ করে।
- skew(x-angle,y-angle) -X-এবং Y-অক্ষ বরাবর একটি 2D স্কিউ ট্রান্সফর্মেশন নির্ধারণ করে।
- skewX(angle) - X-অক্ষ বরাবর একটি 2D স্কিউ ট্রান্সফর্মেশন নির্ধারণ করে।
- skewY(angle) -Y-অক্ষ বরাবর একটি 2D স্কিউ ট্রান্সফর্মেশন নির্ধারণ করে।
- perspective(n) - একটি 3D ট্রান্সফর্মেশন এলিমেন্টের জন্য একটি পরিপ্রেক্ষিত প্রদর্শন নির্ধারণ করে।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
transform প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।