- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - scale3d()
The scale3d() function in CSS is used to apply a scaling transformation (resizing) to an element on the three-dimensional plane. The function can resize the element in different directions at different scales, as the amount of scaling is defined by a vector [sx, sy, sz]. The result is a <transform-function> datatype.
The scaling transformation is determined by a three-dimensional vector, whose coordinates specify how much scaling or resizing will be done in each direction.
The scaling will be uniform (isotropic) and the aspect ratio of the element will be preserved, when all the three coordinates are equal. This form of scaling transformation is known as homothetic transformation.
In case the coordinate value is outside the [-1, 1] range, the element will grow in the dimension that is specified.
In case the coordinate value is inside the [-1, 1] range, the element will shrink in the dimension that is specified.
In case the coordinate value is negative, it results in point reflection in the specified dimension.
When the value is 1, it has no effect in the size of the element.
Possible values
The function scale3d() accepts three values as parameter(s), that represents the amount of scaling to be applied in each direction.
sx: It is a <number> value that represents the abscissa (horizontal, x-coordinate) of the scaling vector.
sy: It is a <number> value that represents the ordinate (vertical, y-coordinate) of the scaling vector.
sz: It is a <number> value that represents the z-component of the scaling vector.
Syntax
transform: scale3d(sx, sy, sz);
CSS scale3d() - With or Without transform-origin Value
Following is an example of scale3d() function with and without transform-origin value given:
<html> <head> <style> div { width: 100px; height: 100px; background-color: cyan; border: 2px solid black; } .scaled-without-origin { background-color: pink; transform: perspective(500px) scale3d(1.5, 0.8, 0.2) translate(100px); } .scaled-with-origin { background-color: lightgreen; transform: perspective(500px) scale3d(1.5, 0.8, 0.2) translate(100px); transform-origin: right; } </style> </head> <body> <section> <div>No function</div> </section> <section> <div class="scaled-without-origin">w/o transform-origin</div> </section> <section> <div class="scaled-with-origin">with transform-origin</div> </section> </body> </html>
To Continue Learning Please Login
Login with Google