CSS / Transform (rotate, scale, translate)

Transform (rotate, scale, translate)

CSS transform property нь элементийг хөдөлгөх, эргүүлэх, томруулах, налуулах боломж олгодог — бусад элементүүдэд нөлөөлөхгүйгээр.

transform яаж ажилладаг вэ?

transform нь элементийн дүрслэгдсэн байдлыг өөрчилдөг. Харин document flow-д хамаарахгүй — хөрш элементүүдийг шахдаггүй.

css

.хайрцаг {
  transform: rotate(45deg);
}

translate() — байрлал өөрчлөх

Элементийг X ба Y тэнхлэгийн дагуу шилжүүлнэ:

css

.шилжих {
  transform: translate(50px, 20px); /* баруун 50px, доош 20px */
}

/* Зөвхөн нэг тэнхлэгт */
.баруун {
  transform: translateX(100px);
}

.доош {
  transform: translateY(-30px); /* дээш 30px */
}

position: relative + top/left-ийн оронд translate() ашиглах нь илүү гүйцэтгэлтэй.

rotate() — эргүүлэх

Элементийг цагийн зүүний дагуу эргүүлнэ:

css

.эргэх {
  transform: rotate(45deg); /* 45 градус */
}

.урвуу {
  transform: rotate(-90deg); /* цагийн зүүний эсрэг */
}

.дугуй {
  transform: rotate(180deg); /* урвуулах */
}

scale() — хэмжээ өөрчлөх

Элементийн хэмжээг томруулах буюу жижигрүүлэх:

css

.томруулах {
  transform: scale(1.5); /* 1.5 дахин том */
}

.жижигрүүлэх {
  transform: scale(0.5); /* хагас жижиг */
}

/* X ба Y тусдаа */
.өргөн {
  transform: scale(2, 1); /* зөвхөн өргөн 2 дахин */
}

scale(1) — анхны хэмжээ. scale(0) — боломгүй жижиг (харагдахгүй).

skew() — налуулах

Элементийг налуулна (parallelogram хэлбэрт):

css

.налуу {
  transform: skew(15deg); /* X тэнхлэгт налуулах */
}

.хоёр-тэнхлэг {
  transform: skew(15deg, 10deg); /* X ба Y хоёуланд */
}

Олон transform давхарлах

Нэг transform-д хэд хэдэн функц зай тавин бичнэ:

css

.олон {
  transform: translate(50px, 0) rotate(45deg) scale(1.2);
}

Дараалал чухал! Transform-ууд баруунаас зүүн рүү биш — зүүнээс баруун рүү гүйцэтгэгддэг.

css

/* Эхлээд translate, дараа rotate */
.a {
  transform: translate(100px, 0) rotate(45deg);
}

/* Эхлээд rotate, дараа translate — өөр үр дүн! */
.b {
  transform: rotate(45deg) translate(100px, 0);
}

transform-origin — эргүүлэх цэг

Transform хаанаас эхлэхийг тодорхойлно. Анхдагч: center center (50% 50%):

css

.зүүн-дээд {
  transform-origin: top left;
  transform: rotate(45deg); /* зүүн дээд буланд зогсоод эргэнэ */
}

.доод-дундаас {
  transform-origin: bottom center;
  transform: rotate(-30deg);
}

/* Пиксел буюу хувиар */
.тодорхой {
  transform-origin: 20px 80%;
}

Hover дээр transform ашиглах

css

.товч {
  background: #a78bfa;
  padding: 12px 24px;
  transition: transform 0.2s ease;
}

.товч:hover {
  transform: scale(1.05) translateY(-2px);
}

.товч:active {
  transform: scale(0.98);
}

3D transform танилцуулга

CSS нь 3D transform-ийг дэмждэг. Эхлээд perspective тодорхойлно:

css

.хамтлаг {
  perspective: 500px; /* 3D орон зайн гүн */
}

.картуудын-3d {
  transform: rotateY(45deg); /* Y тэнхлэгт эргэх */
}

.хазайсан {
  transform: rotateX(30deg); /* X тэнхлэгт эргэх */
}

.гүн {
  transform: translateZ(50px); /* ойртох */
}

Өргөн хэрэглэгддэг 3D жишээ — картны хөрвүүлэлт:

css

.карт {
  width: 200px;
  height: 120px;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.карт:hover {
  transform: rotateY(180deg);
}

.урд,
.ар {
  position: absolute;
  backface-visibility: hidden;
}

.ар {
  transform: rotateY(180deg);
}

matrix() — нэгдсэн transform

Бүх transform-ийг нэг математик матрицад нэгтгэдэг. Практикт ховор хэрэглэгддэг — JS animation library-нууд дотор ашигладаг:

css

/* translate(50px, 20px) rotate(10deg) scale(1.2) — нэг матрицаар */
.матрикс {
  transform: matrix(1.18, 0.21, -0.21, 1.18, 50, 20);
}

Бодит жишээ: Загварлаг карт

css

.карт {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 24px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.карт:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

Дараагийн хичээлд:

box-shadow ба text-shadow — элемент болон текстэд сүүдэр нэмэх аргуудыг судална.

← Өмнөх хичээлAnimation ба keyframe Дараах хичээл →Box-shadow ба text-shadow