transform প্রপার্টি একটি এলিমেন্টের আকার, size, বা position visually বদলায়, width বা margin বদলালে যেভাবে আশেপাশের এলিমেন্ট সরে যায় সেভাবে না।
.box {
transform: translate(50px, 20px); /* ডানে 50px, নিচে 20px */
transform: translateX(50px);
transform: translateY(20px);
}.box {
transform: rotate(45deg);
}.box {
transform: scale(1.5); /* 150% size, দুই দিকেই */
transform: scale(1.5, 0.5); /* আলাদা width আর height scale */
}.box {
transform: skewX(20deg);
transform: skewY(10deg);
}একটি transform মানে একাধিক function list করা যায়, ক্রম অনুযায়ী apply হয়।
.box {
transform: translate(20px, 10px) rotate(15deg) scale(1.2);
}একটি rotation বা scale কোন point ঘিরে হবে তা সেট করে — default-এ center।
.box {
transform-origin: top left;
transform: rotate(45deg);
}| Function | প্রভাব |
|---|---|
| translate(x, y) | একটি এলিমেন্ট move করে |
| rotate(deg) | একটি এলিমেন্ট rotate করে |
| scale(x, y) | একটি এলিমেন্টের size বদলায় |
| skew(x, y) | একটি axis বরাবর একটি এলিমেন্ট slant করে |
Transform যা করে না
একটি transform সম্পূর্ণ visual — width, height, বা margin সরাসরি বদলানোর মতো এটি কখনো পেজের layout-এ একটি এলিমেন্টের সংরক্ষিত জায়গা বদলায় না।