CSS scale3d() Function
Example
Use scale3d() to scale several <div> elements:
#myDiv1 {
transform: scale3d(0.8, 0.8, 0.8);
}
#myDiv2 {
transform: scale3d(-0.5, -0.5, -0.5);
}
#myDiv3 {
transform: scale3d(1.1, 1.2, 1);
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS scale3d() function defines a 3D
scaling of an element.
The scale3d() function defines values for
how much an element is scaled in x- , y-, and z-directions.
The scale3d() function is used within the
transform property.
| Version: | CSS Transforms Module Level 2 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| scale3d() | 12 | 12 | 10 | 4 | 15 |
CSS Syntax
scale3d(sx, sy, sz)
| Value | Description |
|---|---|
| sx | A positive or negative number that defines the scaling vector for the width |
| sy | A positive or negative number that defines the scaling vector for the height |
| sz | A positive or negative number that defines the scaling vector for the z direction |
More Examples
Example
Use scale3d() to scale images:
#img1 {
transform: scale3d(0.8, 0.8, 0.8);
}
#img2 {
transform: scale3d(-0.5, -0.5, -0.5);
}
#img3 {
transform: scale3d(1.1, 1.1, 1);
}
Try it Yourself »
Related Pages
CSS reference: CSS transform property.
CSS reference: CSS scale property.
CSS reference: CSS scale() function.
CSS reference: CSS scaleX() function.
CSS reference: CSS scaleY() function.
CSS tutorial: CSS 3D transforms.
