CSS ????? ???? ?? ??? ?? ??? ?????. ?? ?? ??? 3D ??? ?? ? ??? (?? ??? ??? ?? ???) transform ??? ???? 3D ?? (x, y ? z ?)?? ??? ???? ???? ?? ??? ???? ??? ?? ? ? ????.

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

?? ??

??? ??? ?? ?????? ???? 3 ??? ?????.

X? Y ??? ??? ???? ?? ?? ????? Z ??? ???? ????? ???? ????. ??? z ??? ??? ? ?????? ???? ? ??? ???? ????? ?? ??? ????? ?? (? ??)? ???? ???? ?????. CSS perspective ??? ???? ????.

??? x ?? y ??? ??? ? ???? ??? ??? ???, ???? ??? ?? ????? ? ????? ? ?? ??? ????. ?????. ?????.

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

Z ??? ????? ????? ?? ?? ??? ???? ???? ??? ? ???? ???? X ?? Y ?? ???? ???? (???? ???? ??) ????? ???? ?? ? ?? ??? ?????. ??? ??? ???? ????? ???? ????? ???? ? ?? ??? ? ?? ?? ??? ??? ???? ????.

??? x ?? y ??? 90 °? ?? (?? 270 °, 450 °, 630 ° ?) ??? ???????? "?????. ?? ????, ??? ??? ??? ??? ?? ? ?? ???? ???? ????? ?? (?? ??)? ??? 0????.

?? ??

perspective ??? ????? ?? ???????. ? ?? ?? ??? ??, ? ??? ??? ?????. ?? ??? ???? ? ?? ????. ?? ???? ?? ??? ? ?????.

??? ??

perspective-origin ??? "??"??? ??? ?????. ??? ??? ?? (???) ??? ????? ???? ???????? ??? ???? (? ???).

?? ??? ???? perspective-origin ??? ? ????. ??? ??? ???? ?? ???? ??? "??"?? ?? ????. ?? ??? ???? ? ?? ????.

??

perspective ? perspective-origin ??? ? ????? ???? ??? ???? ?? (?, ??? ?? ???? "???? ???? ??)? ??? ???????, ?? ??? ?? ? transform ??? ???? ??? ??? ??? ?????.

?? ??? ??? ?? ????? ???? ????? ???? translateX() ??? ???? ?? ? ? ????. ??? X ?? ?? ????? ??? ??? ??? ????. ??? transform ??? ?????. ? ??? ????? ??? ?? ???? ?? ????? ??? ?? ??? ?? ? ?? ??? ?????.

?? ??? "??"?? ??? transform ? ? ????. ??? ?? ??? ??? ?? ???? ? ? ?? ?? ??? ??? ????.

1. ??? ???? ???? ??? ?? ?????.
2. ??? ???? ?? ??? ?? ?? ???? ?? ?????.
3. ??? ?? ?? ? ??? ?? ??? ?????.

?? ???? ??? ??? ???? ?? X ?? ????? ???????. ???? ?? ? ? ????. ? ?? ?? ??? ???? (?? ???? ??) ??? ??? ????.

??? transform ?? ?? ??? ???? ????? ? ?? ??? ?? ?? ?????. ??, ??? ? ?? ??? ??? 2 ?? (2D) ????, ? ? ??? ?? ?? ??? ? ?? ?? ??? ??? ????.

Y ??? ??? ?????? ???????.

? ??? ????? ? ??? ???? ?? ??? ??? ?? ?? ? ??? ??? ??? ? ????. ?? ??……

 <code>transform: translateX(100px) rotateY(90deg);</code>

... ??? ?? ?? :

 <code>transform: rotateY(90deg) translateZ(100px);</code>

??? ? ?? ??? ??? ????? ?? x ?? ??? ????? ? ?? ??? ??? ????? ??? ?? ? ?? z ? ?? ???? ?????. ??? ??, ?? ?.

? ???? ?? ??

??, ???? ??? ???? ??? ???? ?? ?????, ??? ??? 3 ?? (3D) ???? ???? ??? ??? ????? ??? ? ? ????.

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

HTML

??? .cube ??? ???? ?? .cube .container ??? ?? ????.

<div class="container">
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side right"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
</div>

??? ? CSS

??, .container ??? ?? ??? ?????. ?? ?? .cube ??? ?? ??? 200px?? 3D ??? ???????. ??? ? ?? ??? ???? ????? ?? ??? ?? ?????.

 /* ????? ?? ????*/
.Container {
  ?? : 400px;
  ?? : 400px;
  ??? : 2px ??? ??;
  Border-Radius : 4px;
  ????? : Flex;
  ??? ??? : ??;
  ?? ?? : ??;
  ?? : 800px;
  ???-??? : ???;
}

/* ??? ??, 3D ?? ??*/
.cube {
  ?? : ??;
  ?? : 200px;
  ?? : 200px;
  ?? ??? : Preserve-3D;
}

/* ?? ??, ?? ????*/
.? {
  ?? : ??;
  ?? : 100%;
  ?? : 100%;
  ???? : 0.9;
  ??? : 2px ??? ??;
}

/* ?? ?? ???, ?? ???? ???*/
.front {??? : #d50000; }
.Backing {??? : #aa00ff; }

.Left {??? : #304ffe; }
.right {??? : #0091ea; }

.TOP {??? : #00BFA5; }
.Bottom {??? : #64dd17; }

??? ??????

??? ?? ????. ??? ??? 100px? ??? ?????.

 .?? {
  ??? : #D50000;
  ?? : Translatez (100px);
}

translateZ(-100px) ???? ?? ??? ?? ??? ? ????. ? ?? ??? 180deg ??? ????? ??? ???? ????.

 .??? {
  ??? : #aa00ff;
  ?? : translatez (-100px);

  /* ?? */
  /* ?? : Rotatey (180deg) Translatez (100px); */
}

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

 .?? {
  ??? : #304ffe;
  ?? : Rotatey (90deg) Translatez (100px);

  /* ?? */
  /* ?? : TranslateX (100px) Rotatey (90deg); */
}

.??? {
  ??? : #0091EA;
  ?? : Rotatey (-90deg) translatez (100px);

  /* ?? */
  /* ?? : TranslateX (-100px) Rotatey (90deg); */
}

??? ??? ?? ????. Y ??? ?? ? ??? ??? X ??? ???????. ?? ? ?, ?? ?? ???? ?? ? ? ????.

 .? ? {
  ??? : #00BFA5;
  ?? : rotatex (90deg) translatez (100px);

  /* ?? */
  /* ?? : translatey (-100px) rotatex (90deg); */
}

.? ?? {
  ??? : #64dd17;
  ?? : rotatex (-90deg) translatez (100px);

  /* ?? */
  /* ?? : Translatey (100px) rotatex (90deg); */
}

??? ???? 3D ??? ?????!

?? perspective ? perspective-origin ??? ???? ??? ??? ?? ??? ???? ??????. "???"?? ???, ??? ?? ?????, ??? ?? ? ????? ??? ?? ??? ?? ????.

transform-style ? ?? ??????

??? ??? ?? ?????? ????? ?? transform-style ??? ?? ?????. ?? CSS?? ?? ????? ??? ??? ???? ?? ?????? ???? ????.

transform-style ???? ? ?? ?? ????.

• flat (???)
• preserve-3d

??? ??? preserve-3d ?? ??? ?, ??? ? ?? ??? ?????.

1. ??? ??? ?? (??? ??)? ??? ?? 3D ??? ??? ?????. preserve-3d ?? ??? ???? flat ?? ?? ???? ??? ?????. ??? ??? ?? ?? (??)? " preserve-3d "?? ?? ? ?? ? ?????? ??? ??? ????? ? ??? ????.
2. DOM??? ?? ? ???? 3D ????? ?? ? ?? ?? ??? ?????.

? ??? ??, ??? ? ???? ? ?? ??? ????. ?? ????? translateZ ?? 100px??? ?? ??? ?? ????. ??? ???? translateZ ?? -100px???. ?? ?? ??? ?? ??? ?????.

??? DOM??? ???? ??? ??, ???, ??????. ??? transform-style flat ?? ????? ?? ???? ??? ??? ???? ??? ???? Green Square? DOM? ???? ??? ?? ????. ??? transform-style preserve-3d ? ???? 3D ????? ??? ?? ??????. ????? ?? ??? ?? ?? ??? ???? ??? ????.

??

?? ??? ???????! ? ???? ???? ?? ? ? ??? ?????? ?????. ?? animation ??? .cube ? ?????. ??? ?? ????? ? ???? ???? ??? ??? ?? ?? ???? ?? ????. ??? ??? ? ?, ??? ???? ????.

 ????? : cuberotate 10s ?? ??;

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

 @keyframes cuberotate {
  {transform : rotatey (0DEG) ROTATEX (720DEG) ROTATEZ (0DEG); }
  to {transform : rotatey (360deg) rotatex (0deg) rotatez (360deg); }
}

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

??? ? ??? perspective ??? ?? ???? ??? perspective-origin ? ????????. ? ?? ??? ?? ??? ??? ?? ??? ???? ?? ?????.

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

• ??? ????? perspective ??? ?? ?????. ? ?? ?? ????? ??? ????? ?? ???? ?? ??? ? ?????.
• ?? ? ????? perspective-origin ??? ?????. ??? ????? ?? ??? ??? ??? ??? ???? ?? ????? ????? ???? ?? ?? ??? ?????.

?? ??? ?? ? ? ?????? ??? ? ??? ?? ??? ???? ?? ? ???, ?? ????? ??? ???? ?????? ?? ?? ? ????.

? ?? ???? ???? ??? ??? ??? ?? ??? ???? ??????. "???"?? ???, ??? ?? ?????, ??? ?? ? ????? ??? ?? ??? ?? ????.

?? ???

CSS? perspective ??? ?? ??? ???? ???? ???? ???? ??? ?????? 3D ??? ??? ??, ??, ?? ? "??? ????? ??"?? ?? ??? ??? ?? ? ? ????.

???, ??? ??? ??? ?? ?????? ??? ??? ?? ??? ???? ???? ? ????.

? ??? ?? ? ???? ??? ?? ??? ?? ???? ????! ??? ??????. ??? ??? ??????.? ??? ????? ?? ??? ?? ??? ?? ??? Twitter? ?? ??? ?????.

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