- CSS - Home
- CSS - Roadmap
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Types
- CSS - Measurement Units
- CSS - Selectors
- 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 - Cascading
- CSS - Universal Selectors
- CSS - ID Selectors
- CSS - Group Selectors
- CSS - Class Selectors
- CSS - Child Selectors
- CSS - Element Selectors
- CSS - Descendant Selectors
- CSS - General Sibling Selectors
- CSS - Adjacent Sibling Selectors
- 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 Advanced Features
- 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 Interview Questions
- CSS Online Quiz
- CSS Online Test
- CSS Mock Test
- CSS - Quick Guide
- CSS - Cheatsheet
- CSS - Properties References
- CSS - Functions References
- CSS - Color References
- CSS - Web Browser References
- CSS - Web Safe Fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS Data Type - <transform-function>
A transformation that affects an element's display is represented by the <transform-function> CSS data type. The transformation functions are responsible for rotating, scaling (resizing), skewing (distorting), or moving an element in two-dimensional (2D) and three-dimensional (3D) space. The <transform-function> represents the value part of the transform property.
Syntax
The <transform-function> CSS data type can be specified using the transformation functions, listed below:
Matrix transformation
| Function | Description |
|---|---|
| matrix() | Specifies a homogenous two-dimensional transformation matrix. |
| matrix3d() | Specifies a three-dimensional transformation as a 4x4 homogenous matrix. |
Perspective
| Function | Description |
|---|---|
| perspective() | Sets the distance between the user and the z=0 plane. |
Rotation
| Function | Description |
|---|---|
| rotate() | Sets the rotation of an element around a fixed point in two-dimensional space. |
| rotate3d() | Sets the rotation of an element around a fixed axis in three-dimensional space. |
| rotateX() | Sets the rotation of an element around the horizontal axis. |
| rotateY() | Sets the rotation of an element around the vertical axis. |
| rotateZ() | Sets the rotation of an element around the z-axis. |
Scaling (resizing)
| Function | Description |
|---|---|
| scale() | Scales an element up or down on the two-dimensional space. |
| scale3d() | Scales an element up or down on the three-dimensional space. |
| scaleX() | Scales an element up or down horizontally. |
| scaleY() | Scales an element up or down vertically. |
| scaleZ() | Scales an element up or down along the z-axis. |
Skewing (distortion)
| Function | Description |
|---|---|
| skew() | Skews an element on the two-dimensional space. |
| skewX() | Skews an element in the horizontal direction. |
| skewY() | Skews an element in the vertical direction. |
Translation (moving)
| Function | Description |
|---|---|
| translate() | Translates an element on the two-dimensional space. |
| translate3d() | Translates an element on the three-dimensional space. |
| translateX() | Translates an element horizontally. |
| translateY() | Translates an element vertically. |
| translateZ() | Translates an element along the z-axis. |
CSS <transform-function> - Coordinate models
An HTML element's size and shape can be described by various coordinate models, along with any transformations that are applied to it. The commonest model is Cartesian coordinate system; but homogeneous coordinates are also used sometimes.
CSS <transform-function> - Cartesian coordinates
According to the Cartesian coordinate system, a two-dimensional point is specified using two values, an x coordinate (abscissa) and a y coordinate (ordinate). It is represented using the vector notation (x, y).
In CSS, the origin (0, 0) determines the top-left corner of any element. All the positive coordinate values are down and towards the right of the origin. While negative values are up and towards the left of the origin.
Refer the diagram given below to understand the cartesian coordinate system.
Note: The transformation functions mentioned above are used with the transform property, but not with the individual transform properties, such as rotate, scale, and translate.