In this tutorial, We will learn 2D and 3D CSS transforms which allow you to rotate, move, scale, and screw elements.
2D Transforms
Here are the list of CSS properties that can use in 2d transform.
Functions | Syntax | Definition | Example |
translate(x,y) | transform: translate(50px,40px); | Move an element along the x-axis and y-axis from its current position | Try it |
translateX(n) | transform: translateX(50px); | Move an element along the x-axis only | Try it |
translateY(n) | transform: translateY(50px); | Move an element along the y-axis only | Try it |
rotate(angle) | transform: rotate(10deg); | Rotate an element at a defined angle | Try it |
scale(x,y) | transform: scale(1.5,2); | Change the element width and height | Try it |
scaleX(n) | transform: scaleX(2); | Change the element width only | Try it |
scaleY(n) | scaleX(n) | Change the element height only | Try it |
skewX(angle) | transform: skew(10deg, 20deg); | Skew transformation along x-axis and y-axis | Try it |
skewX(angle) | transform: skewX(50deg); | Skew transformation along x-axis | Try it |
skewY(angle) | transform: skewY(50deg); | Skew transformation along y-axis | Try it |
matrix(n,n,n,n,n,n) | transform: matrix(2, 0.5, 0, 1, 2, 0); | It combines all 2D transform methods into one. | Try it |
3D Transforms
In CSS, you can define any elements into 3D views by applying the z-axis. 2D transforms use x-axis and y-axis whereas 3D transforms apply the z-axis also.
Here are the list of CSS properties that can use in 3D transform.
Functions | Syntax | Definition | Example |
translate3d() | transform: translateX(50px, 50px, 50px); | Move an element along into x-axis, y-axis and z-axis from its current position | Try It |
translateX(x) | transform: translateX(50px); | Move an element along the x-axis only | Try It |
translateY(y) | transform: translateY(50px); | Move an element along the y-axis only | Try It |
translateZ(z) | transform: translateZ(50px); | Move an element along the z-axis only | Try It |
rotate3d(x,y,z,angle) | transform: rotate3d(1, 1, 1, 45deg); | Rotate an element along inn 3D axis. | Try It |
rotateX(angle) | transform: rotateZ(90deg); | Rotate an element along in x-axis. | Try It |
rotateY(angle) | transform: rotateY(180deg); | Rotate an element along in y-axis. | Try It |
rotateZ(angle) | transform: rotateZ(90deg); | Rotate an element along in z-axis. | Try It |
scale3d(x,y,z) | transform: scale3d(2,2,2); | Define a 3D scale transformation | Try It |
scaleX(x) | transform: scaleX(2); | Define an x-axis scale transformation | Try It |
scaleY(y) | transform: scaleY(2); | Define an y-axis scale transformation | Try It |
scaleZ(z) | transform: scaleZ(2); | Define an z-axis scale transformation | Try It |
perspective(n) | perspective(n) | Define a prespective view for a 3D transformation | Try It |
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | matrix3d () | Define a 3D tranformation using 4×4 matrix of 16 values | Try It |
You may be interested in the following topics:
- CSS Navigation Bar Define
- CSS Opacity Define
- CSS Align Justify
- CSS Align Center
- CSS Align Right
- CSS Align Left
- CSS Align (All Properties)
- CSS Float None
- CSS Float Right
- CSS Float Left
- CSS Float (All Properties)
- CSS Overflow visible
- CSS Overflow scroll
- CSS Overflow overlay
- CSS Overflow hidden
- CSS Overflow Auto
- CSS Overflow (All Properties)
- CSS Position relative
- CSS Position sticky
- CSS Position static
- CSS Position fixed
- CSS Position absolute
- CSS Position (All Properties)
- CSS Display Table-cell
- CSS Display Table-caption
- CSS Display Table
- CSS Display None
- CSS Display list-item
- CSS Display Inline-table
- CSS Display Inline-grid
- CSS Display Inline-flex
- CSS Display Inline-block
- CSS Display Inline
- CSS Display Grid
- CSS Display Flow-root
- CSS Display Flex
- CSS Display Contents
- CSS Display Block
- CSS Display (All Properties)
- CSS Striped Tables
- CSS Hoverable Tables
- CSS Vertical Dividers
- CSS Horizontal Dividers
- CSS Vertical Alignment
- CSS Horizontal Alignment
- CSS Table Color
- CSS Table Padding
- CSS Table Height
- CSS Table Width
- CSS Collapse Table Borders