Translate % Relative To Own Box Width
Resolve a signed horizontal translate percentage against an explicitly supplied reference-box width in pixels; the caller chooses the transform reference box.
Description
A percentage translateX resolves against the width of the transform reference box.
A percentage translateX resolves against the width of the transform reference box. That differs from a background-position percentage, which uses the difference between the positioning area and the image size.1, 2
Resolve a signed horizontal translate percentage against an explicitly supplied reference-box width in pixels; the caller chooses the transform reference box.
When to use Translate % Relative To Own Box Width
Use this tool to resolve a signed horizontal translate percentage against an explicitly supplied reference-box width in pixels; the caller chooses the transform reference box.
Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
How to use Translate % Relative To Own Box Width and understand its results
- Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
- Enter referenceWidth, percent using the field table and calculation rules, then run the tool.
- Read translation. The explanation below defines the units, signs, ordering and any flags or placeholder values.
- If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.
| Input field | Meaning | Value type; see rules below | Requirement |
|---|---|---|---|
| referenceWidth | Reference width | number; minimum: 0 | Required |
| percent | Percent | number | Required |
Enter the explicitly chosen reference-box width in pixels and a signed percentage. The tool computes the horizontal pixel translation, normalizes negative zero to zero and tries a second multiplication order if a nonzero calculation underflows. A nonfinite or still-underflowed nonzero result is an input issue. Zero width or zero percent returns zero.
translation = referenceWidth × percent / 100 Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| translation | Translation | number |
{
"input": {
"referenceWidth": 240,
"percent": -25
},
"output": {
"translation": -60
}
}Limitations and assumptions
The caller must determine the appropriate transform-box width. This does not inspect DOM geometry, resolve transform-origin or combine transforms, and it does not use the parent/container width automatically. Out-of-range percentages remain valid signed offsets.
Numeric inputs must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.
Alternative or Complementary methods
Use background-position Percent Alignment Formula: Resolve one background-position percentage as a pixel offset from the near edge using positioning-area size minus rendered-image size; oversized images and out-of-range percentages are allowed. For a complementary task, use Negative scale Flip Mirror Check: Classify axis reflections, orientation reversal, and collapsed axes of a two-dimensional CSS scale.
Further background: CSS Transforms: reference boxes and translation.
References
Similar or alternative tools
- background-position Percent Alignment Formula
Resolve one background-position percentage as a pixel offset from the near edge using positioning-area size minus rendered-image size; oversized images and out-of-range percentages are allowed.
- Negative scale Flip Mirror Check
Classify axis reflections, orientation reversal, and collapsed axes of a two-dimensional CSS scale.