Developer
Intros
How it works
API reference
Turbo CSS
Fundamentals
Utilities
Box sizing
Display
Float
Clear
Overflow
Position
Z index
Width
Min width
Max width
Height
Min height
Max height
Margin
Padding
Border
Border width
Border color
Border style
Border radius
Outline
Outline width
Outline color
Outline style
Outline offset
Top
Right
Bottom
Left
Inset
Flex direction
Flex grow
Flex shrink
Flex basis
Flex wrap
Order
Flex
Flex box alignment
Justify content
Align content
Align items
Align self
Table layout
Border collapse
Background attachment
Background clip
Background color
Background position
Background repeat
Background size
Background pattern
Object fit
Object position
Box shadow
Opacity
Visibility
Color
Font family
Font size
Font smoothing
Font style
Font weight
Letter spacing
Line height
List style type
List style position
Tab size
Text align
Text decoration
Text transform
Text overflow
Vertical align
Whitespace
Word break
Transform
Scale
Rotate
Translate
Skew
Transform origin
Transition
Transition property
Transition duration
Transition timing function
Transition delay
Appearance
Cursor
Pointer events
Resize
User select
Fill
Stroke color
Stroke width
Selectors
Download
Turbo UI
Turbo Playground
License
Blog
Developer
Intros
How it works
API reference
Turbo CSS
Blog
Fundamentals
Utilities
Selectors
Download
Turbo UI
Turbo Playground
License
Layout
Box sizing
Display
Float
Clear
Overflow
Position
Z index
Sizing
Width
Min width
Max width
Height
Min height
Max height
Spacing
Margin
Padding
Border
Border
Border width
Border color
Border style
Border radius
Outline
Outline
Outline width
Outline color
Outline style
Outline offset
Coordinates
Top
Right
Bottom
Left
Inset
Flexbox
Flex direction
Flex grow
Flex shrink
Flex basis
Flex wrap
Order
Flex
Flex box alignment
Box alignment
Justify content
Align content
Align items
Align self
Table
Table layout
Border collapse
Background
Background attachment
Background clip
Background color
Background position
Background repeat
Background size
Background pattern
Object
Object fit
Object position
Effects
Box shadow
Opacity
Visibility
Text
Color
Font family
Font size
Font smoothing
Font style
Font weight
Letter spacing
Line height
List style type
List style position
Tab size
Text align
Text decoration
Text transform
Text overflow
Vertical align
Whitespace
Word break
Transform
Transform
Scale
Rotate
Translate
Skew
Transform origin
Transition
Transition
Transition property
Transition duration
Transition timing function
Transition delay
Interactivity
Appearance
Cursor
Pointer events
Resize
User select
SVG
Fill
Stroke color
Stroke width
Scale
Syntax
Class
Properties
transform-(scale-
{value}
)
transform: scale(
{value}
);
transform-(scale-
{x}
-
{y}
)
transform: scale(
{x}
,
{y}
);
Parameters
value
<int32 unit=0.01>
x
<int32 unit=0.01>
y
<int32 unit=0.01>
transform-none
transform-scale-150
transform-scale-50-150
<div class="t1 px-16 py-4 bg-c-white rounded-3 color-blue b-2-blue shadow-8 my-32 cursor-pointer select-none transform-none">Button</div>
Specification test cases
The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Scale down to 50%
t1 transform-scale-50
.t1.transform-scale-50 { transform: scale(0.5); }
Scale up 2x along the X axis, 3x along the Y axis.
t1 transform-scale-200-300
.t1.transform-scale-200-300 { transform: scale(2, 3); }