Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на English (US).

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.

/* Keyword values */
transform-box: border-box;
transform-box: fill-box;
transform-box: view-box;

/* Global values */
transform-box: inherit;
transform-box: initial;
transform-box: unset;

Initial valueborder-box
Applies totransformable elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

The transform-box property is specified as one of the keyword values listed below.

Values

border-box
The border 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.
fill-box
The object bounding box is used as the reference box.
view-box
The nearest SVG viewport is used as the reference box. If a 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 attribute.

Formal syntax

border-box | fill-box | view-box

Specifications

Specification Status Comment
CSS Transforms Level 1
The definition of 'transform-box' in that specification.
Working Draft Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome Full support 64Edge No support NoFirefox Full support 55
Full support 55
Full support 43
Disabled
Disabled From version 43: this feature is behind the svg.transform-box.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 41 — 43
Disabled
Disabled From version 41 until version 43 (exclusive): this feature is behind the svg.transform-origin.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 51Safari ? WebView Android Full support 64Chrome Android Full support 64Edge Mobile No support NoFirefox Android Full support 55
Full support 55
Full support 43
Disabled
Disabled From version 43: this feature is behind the svg.transform-box.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 41 — ?
Disabled
Disabled From version 41: this feature is behind the svg.transform-origin.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 51Safari iOS ? Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also

Метки документа и участники

Внесли вклад в эту страницу: connorshea, mfluehr, fscholz, David_Gilbertson, chrisdavidmills, Sebastianz, sraghav
Обновлялась последний раз: connorshea,