rotateX() в CSS — поворот навколо осі X у transform

HTML

<div id="description">
  <p>При наведенні курсору на блок, він повертається на 180 градусів навколо горизонтальної осі X за допомогою функції rotateX().</p>
</div>

<div class="container">
  <div class="block"></div>
</div>

CSS

#description {
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

.container {
  height: 200px;
  background-color: #F2F2F2;
  position: relative;
}

.block {
  width: 100px;
  height: 100px;
  background-color: #FFC107;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotateX(0deg);
  transition: transform 0.3s ease;
}

.container:hover .block {
  transform: rotateX(180deg);
}

HTML

<div id="description">
  <p>Блок повертається на 45 градусів навколо горизонтальної осі X за допомогою функції rotateX(). Обидва блоки використовують однакові розміри та колір для порівняння.</p>
</div>

<div class="container">
  <div class="block"></div>
  <div class="comparison-block"></div>
</div>

CSS

#description {
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

.container {
  height: 200px;
  background-color: #F2F2F2;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.block {
  width: 80px;
  height: 80px;
  background-color: #FFC107;
  transform: rotateX(45deg);
}

.comparison-block {
  width: 80px;
  height: 80px;
  background-color: #FF0000;
}

HTML

<p class="head">Без перспективи rotateX — це просто стиск по висоті:</p>
<div class="row">
    <div class="pad"><div class="card f0">0°</div></div>
    <div class="pad"><div class="card f1">45°</div></div>
    <div class="pad"><div class="card f2">60°</div></div>
    <div class="pad"><div class="card f3">80°</div></div>
</div>

<p class="head">У сцені з perspective: 500px з'являється об'єм:</p>
<div class="row">
    <div class="scene"><div class="card f0">0°</div></div>
    <div class="scene"><div class="card f1">45°</div></div>
    <div class="scene"><div class="card f2">60°</div></div>
    <div class="scene"><div class="card f4">90° — ребро</div></div>
    <div class="scene"><div class="card f5">135°</div></div>
    <div class="scene"><div class="card f6">180° — зворотний бік</div></div>
</div>

<p class="head">Двобічна картка: наведіть, щоб перегорнути</p>
<div class="row">
    <div class="scene flip">
        <div class="deck">
            <div class="face front">лицьовий бік</div>
            <div class="face back">зворотний бік</div>
        </div>
    </div>
</div>

<p class="head">Без одиниці — увесь список перетворень відкинуто,
    зникає й translateX(40px) поруч:</p>
<div class="row">
    <div class="pad"><div class="card bad">rotateX(45) translateX(40px)</div></div>
    <div class="pad"><div class="card ok">rotateX(45deg) translateX(40px)</div></div>
</div>

CSS

.head {
    margin: 20px 0 8px;
    max-width: 560px;
    color: #5a6472;
    font-size: .9em;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pad,
.scene {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 175px;
    height: 130px;
    background: #f6f9ff;
    border: 1px solid #b9c6d8;
}

.scene {
    perspective: 500px;
}

.card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 66px;
    padding: 2px;
    background: linear-gradient(#2f6fd0, #1b4f9c);
    color: #fff;
    font: 700 12px/1.2 ui-monospace, monospace;
    text-align: center;
}

.f0 { transform: rotateX(0); }
.f1 { transform: rotateX(45deg); }
.f2 { transform: rotateX(60deg); }
.f3 { transform: rotateX(80deg); }
.f4 { transform: rotateX(90deg); }
.f5 { transform: rotateX(135deg); }
.f6 { transform: rotateX(180deg); }

.deck {
    position: relative;
    width: 130px;
    height: 66px;
    transform-style: preserve-3d;
    transition: transform .6s ease;
}

.flip:hover .deck {
    transform: rotateX(180deg);
}

.face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    color: #fff;
    font: 700 12px/1 ui-monospace, monospace;
}

.front {
    background: #2f6fd0;
}

.back {
    background: #3a9a4f;
    transform: rotateX(180deg);
}

.bad {
    transform: rotateX(45) translateX(40px);
    outline: 2px dashed #d64545;
}

.ok {
    transform: rotateX(45deg) translateX(40px);
    outline: 2px dashed #3a9a4f;
}