????? ???? ? ???? ??? ?? ??? 2D ????? ???? ????. CSS? ??? ???? ??? ??? ????? 3D ??? ?? ? ????. ??? ??? ???? ???? ??? ??? ???? ???? ???? 3??? ??? ?? ? ????.

? ?????? CSS? ??? ???? ??, ??, ?? ?? ?? ? ???? 3D ??? ??? ? ??? ? ?? ?? ?? ?? ??? ???????. ? ???, ????? ???? ?? CSS ??? ?????? ???? ???? ? ???? ??? ? ????!

---

CSS? ???? ??????

CSS ??? ??? 3D ?? ??? ???? ??? ???? ???? ????. ????? ??? ?????? ????? ??? ??? ?? ???? ??????? ???? 3D ??? ??????. ? ??? X, Y ?? Z?? ?? ??? ????? ????? ?? ?? ?????.

?? ???:

• ??? ?? ??? 3D ????? ??? ?? ??? ???? ?????.
• ?? ???? ?? ??? ???? ??? ?????? ? ?? ????.
• ?? ???? ??? ????? ?? ??? ?????.

---

??? ?? ??

perspective ??? ? ?? ???? ??? ? ????.

1. ????? ?? ??? ???? ???? ?? ?? 3D ?? ??? ??? ???.
2. ?? ??? ???? ?? ??? ?? ??spective()? ?????.

???? ??? ?? ??

.parent {
  perspective: <distance>;
}

: ?? ??? ?????. ???? ?? ??? 200px?? 2000px????, ?? ???? ???? ????.

??? ??? Perspective? ?? ??

?? ?? ???spective() ??? ???? ??? ?? ???? ??? ? ????.

.element {
  transform: perspective(<distance>) <other transformations>;
}

? ?? ??? ???? ?? ??? ??? ? ?? ???? ??? ? ????.

---

CSS ??? ?? ?

? ?? ?? ?? ???? ???? ???? 3D ??? ??? ??? ???????.

---

? 1: ??? ??? ?? ??

???? ???? ??? 3D ?? ??? ???? ????. ??? ???? ???? Y?? ?? ???? ???, ???? ?? ???? ?? ??? ??????.

<div>





<pre class="brush:php;toolbar:false">/* Container with perspective */
.card {
  width: 200px;
  height: 300px;
  perspective: 800px;
}

.card-content {
  width: 100%;
  height: 100%;
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.card:hover .card-content {
  transform: rotateY(30deg);
}

??:

• .card ?????? 800px? ???? ???? ???? ?????.

• ???? ??? ?? ???? Y?? ?? ???? 3D ??? ??? ???.

• ??? ?? ???? ??? ??????.

---

? 2: ??? ??? Perspective ??

Perspective? ?????? ??? ??? ??? ? ??? ??? ???? ??? ?? ??? ??? ?? ????.

.parent {
  perspective: <distance>;
}

??:

• ??? ???? ??? ???? ???? ????? ?? ??? ??? ??? ??? 3D ???? ??? ?????.

• ?? ??? ?? ??? ???? ??? ?? ??? ??? ??? ?? ????? ?? ? ????.

---

? 3: ???? ?? ??? 3D ??

?? ??? ????? ???? ???? 3D ??? ??? ???? ? ? ??? ?? ???????.

.element {
  transform: perspective(<distance>) <other transformations>;
}

??:

• .scene ????? 600px? ???? ???? 3D ??? ??????.

• .cube ??? ? ?? TranslateZ? ???? ??? ???? 3D ???? ????.

• ???? ??? ??? X?? Y?? ?? ???? ??? ?? ?????.

---

CSS Perspective ??? ?? ?

??? ?????? ?? ??? ??? ???? ? ??? ?? ? ?? ???? ????.

• ?? ? ??: ???? ?? 500px?? 1500px ??? ??? ?????. 3D ??? ?? ??? ????? ?? ?????.

• ?? ??? ??: 3D ?????? 3d ??: ??? ?? ?? ??? ???? ??? ???? ? ???? 3D ??? ??? ? ????.

• rotateX ? RotateY ??: ??? ?? ??? ???? ?? 3D ??? ??? ? ??????. ??? ?? ?? ??? ???? ???? ??? ? ????.

• ?? ??: ?? ??? ???? ???? ????? ???? ? ????. ??? ???? ??? ??? ??? ?? ?? ????? ?????.

• ??? ???? ??: ???? ?? ????? ???? ????? ???? ???? ?? ?? ??? ?????? 3D ??? ??????.

---

???? ??? ?? ??? ??

---

?? 1: ?? ??? Perspective? ?? ??

3D ??? ???? ?? ???? ??? ??? ?? ?? ? ????. ?? ??? ????? ?? ??? ???? ?????.

.parent {
  perspective: <distance>;
}

?? 2: ?? ?? ?? ? ??

?? ?? ??? ?? ??? ???? ???? ??? ? ????. ? ?? ??? ???? ?? ?? ??? ????.

.element {
  transform: perspective(<distance>) <other transformations>;
}

?? 3: ?? ???? ????: Preserve-3D

3D ??? ???? ?? ?? ???: ??-3d? ???? ?? ??? ?? ? ????. ??? ???? ?? ?? ?? ??? ? ??? ?????.

---

?? ???

• ???? 3D ??? ??? ?????.

• ??? ??? ???? ?? ????? Perspective? ?????.

• ?? ?? X/Y ??? ??? ???? ??? ??? ???.

• Transform-style: Preserve-3D? ???? ?? ??? ??? ?????.

??? ?? CSS ??? ??? ?? ??? ?? ????? ???? ?????? ???? ? ????. ??? ?????!

?? ?????? ???? ??? ???? ?? ??????

? ??? CSS? ?? ?????: ? ???? ?? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!