transform-box
CSS property defines the layout box to which the
transform
and
transform-origin
properties relate.
/* Keyword values */ transform-box: content-box; transform-box: border-box; transform-box: fill-box; transform-box: stroke-box; transform-box: view-box; /* Global values */ transform-box: inherit; transform-box: initial; transform-box: unset;
transform-box
property is specified as one of the keyword values listed below.
content-box
The content box is used as the reference box. The reference box of a
<table>
is the border box of its table wrapper box, not its table box.
border-box
<table>
is the border box of its table wrapper box, not its table box.
fill-box
The object bounding box is used as the reference box.
stroke-box
The stroke bounding box is used as the reference box.
view-box
viewBox
attribute is specified for the SVG viewport creating element, the reference box is positioned at the origin of the coordinate system established by the
viewBox
attribute, and the dimension of the reference box is set to the width and height values of the
viewBox
属性。
| 初始值 |
view-box
|
|---|---|
| 适用于 | transformable elements |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
content-box | border-box | fill-box | stroke-box | view-box
In this example we have an SVG:
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<g>
<circle id="center" fill="red" r="1" transform="translate(25 25)" />
<circle id="boxcenter" fill="blue" r=".5" transform="translate(15 15)" />
<rect id="box" x="10" y="10" width="10" height="10" rx="1" ry="1" stroke="black" fill="none" />
</g>
</svg>
In the CSS we have an animation that uses a transform to rotate the rectangle infinitely.
transform-box: fill-box
is used to make the the
transform-origin
the center of the bounding box, so the rectangle spins in place. Without it, the transform origin is the center of the SVG canvas, and so you get a very different effect.
svg{
width:80vh;
border:1px solid #d9d9d9;
position:absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#box{
transform-origin:50% 50%;
/*+++++++++++++++++++++++++++*/
/* if I remove this rule the pen won't work properly on Chrome for Mac, FF, Safari
Will still work properly on Chrome for PC & Opera*/
transform-box: fill-box;
/*Alternatively I can use transform-origin:15px 15px;*/
/*+++++++++++++++++++++++++++*/
animation: rotateBox 3s linear infinite;
}
@keyframes rotateBox {
to {
transform: rotate(360deg);
}
Full credit for this example goes to Pogany ; see this codepen for a live version.
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Transforms Level 1
The definition of 'transform-box' in that specification. |
工作草案 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
transform-box
|
Chrome 完整支持 64 | Edge 完整支持 79 |
Firefox
完整支持
55
|
IE 不支持 No | Opera 完整支持 51 | Safari 完整支持 11 | WebView Android 完整支持 64 | Chrome Android 完整支持 64 |
Firefox Android
完整支持
55
|
Opera Android 完整支持 47 | Safari iOS 完整支持 11 | Samsung Internet Android 完整支持 9.0 |
完整支持
不支持
用户必须明确启用此特征。