CSS - transform-box Property
The CSS property transform-box determines the layout box to which transformation properties relate, such as transform, translate, scale, rotate, and transform-origin.
Possible values
The CSS property transform-box can contain one of the following keyword values:
content-box: This is the default value. The transformations are applied with respect to the element's content box.
border-box: The transformations are applied with respect to the element's border box.
fill-box: The transformations are applied with respect to the paint area of the element, excluding any stroke.
stroke-box: The transformations are applied with respect to the stroke bounding box, which includes the stroked area and the space it occupies.
view-box: The transformations are applied with respect to the nearest SVG viewport.
Applies to
All the transformable elements.
Syntax
transform-box = content-box | border-box | fill-box | stroke-box | view-box;
CSS transform-box - Example
By comparing the the boxes side by side, you should be able to observe that the box transformation as demonstrated below:
<html> <head> <style> svg { width: 120vh; border: 1px solid #d9d9d9; position: relative; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } #box { transform-origin: 50% 50%; /* anything other than `0 0` to see the effect */ transform-box: content-box; animation: rotateBox 3s linear infinite; } #box1 { transform-origin: 50% 50%; /* anything other than `0 0` to see the effect */ transform-box: border-box; animation: rotateBox 3s linear infinite; } #box2 { transform-origin: 50% 50%; /* anything other than `0 0` to see the effect */ transform-box: view-box; animation: rotateBox 3s linear infinite; } #box3 { transform-origin: 50% 50%; /* anything other than `0 0` to see the effect */ transform-box: fill-box; animation: rotateBox 3s linear infinite; } #box4 { transform-origin: 50% 50%; /* anything other than `0 0` to see the effect */ transform-box: stroke-box; animation: rotateBox 3s linear infinite; } @keyframes rotateBox { to { transform: rotate(360deg); } } </style> </head> <body> <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"> <text x="0" y="5" fill="red" font-size="5px">content-box</text> <g stroke-width="1"> <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> <br/> <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"> <text x="0" y="5" fill="red" font-size="5px">border-box</text> <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="box1" x="10" y="10" width="10" height="10" rx="1" ry="1" stroke="black" fill="none" /> </g> </svg> <br/> <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"> <text x="0" y="5" fill="red" font-size="5px">view-box</text> <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="box2" x="10" y="10" width="10" height="10" rx="1" ry="1" stroke="black" fill="none" /> </g> </svg> <br/> <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"> <text x="0" y="5" fill="red" font-size="5px">fill-box</text> <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="box3" x="10" y="10" width="10" height="10" rx="1" ry="1" stroke="black" fill="none" /> </g> </svg> <br/> <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"> <text x="0" y="5" fill="red" font-size="5px">stroke-box</text> <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="box4" x="10" y="10" width="10" height="10" rx="1" ry="1" stroke="black" fill="none" /> </g> </svg> </body> </html>
To Continue Learning Please Login
Login with Google