CSS transform-box — коробка відліку для transform-origin
Загальний опис
автор: NagarD
Синтаксис
transform-box: content-box|border-box|fill-box|stroke-box|view-box;| Значення без задання: | view-box |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.transformBox="fill-box" |
Переглядачі
Переглядачів ще не додано.
Приклади
+ запропонувати свій приклад у пісочниці
Той самий поворот на 45° у SVG двічі: сірий квадрат — початкове положення, червоний обертається з типовим view-box навколо центру всієї картинки й тікає за її край, зелений із fill-box — навколо власного центру. Нижче та сама різниця в HTML: сіра тінь показує положення до повороту.
HTML
<figure>
<figcaption>SVG, типовий transform-box (view-box): 50% 50% — це центр УСІЄЇ
картинки, тож квадрат тікає геть</figcaption>
<svg width="260" height="150" viewBox="0 0 260 150">
<rect x="20" y="50" width="50" height="50" fill="#c9d4e3"></rect>
<rect class="turn" x="20" y="50" width="50" height="50" fill="#d64545"></rect>
</svg>
</figure>
<figure>
<figcaption>transform-box: fill-box — той самий поворот навколо центру самого
квадрата</figcaption>
<svg width="260" height="150" viewBox="0 0 260 150">
<rect x="20" y="50" width="50" height="50" fill="#c9d4e3"></rect>
<rect class="turn own-box" x="20" y="50" width="50" height="50" fill="#3a9a4f"></rect>
</svg>
</figure>
<div class="row">
<figure>
<figcaption>HTML: content-box</figcaption>
<div class="pad">
<div class="ghost"></div>
<div class="card content-box">поворот 30°</div>
</div>
</figure>
<figure>
<figcaption>HTML: border-box (як типово)</figcaption>
<div class="pad">
<div class="ghost"></div>
<div class="card border-box">поворот 30°</div>
</div>
</figure>
</div>CSS
figure {
margin: 0 0 18px;
font: 14px/1.4 system-ui, sans-serif;
}
figcaption {
margin-bottom: 5px;
max-width: 300px;
font-weight: 600;
}
svg {
border: 2px solid #b9c6d8;
background: #f6f9ff;
}
.turn {
transform-origin: 50% 50%;
transform: rotate(45deg);
}
.own-box {
transform-box: fill-box;
}
.row {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.pad {
position: relative;
width: 240px;
height: 230px;
border: 2px dashed #b9c6d8;
background: #f6f9ff;
}
.ghost,
.card {
position: absolute;
left: 20px;
top: 90px;
width: 100px;
height: 50px;
padding: 20px;
border: 10px solid #c9d4e3;
}
.card {
border-color: #2f6fd0;
background: rgba(207, 224, 247, .85);
color: #1b4f9c;
font-weight: 600;
transform-origin: 100% 100%;
transform: rotate(30deg);
}
.content-box {
transform-box: content-box;
}
.border-box {
transform-box: border-box;
}Коментарі
Коментарів ще немає — будьте першим!