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:
- How do I zoom in on the image?
- CSS Image Overlay Zoom
- CSS Image Overlay Icon
- CSS Image Overlay Title
- CSS Transition-timing-function
- CSS Transition-property
- CSS Transition-duration
- CSS Transition-delay
- CSS Transition
- CSS Transition (All Properties)
- CSS Transforms
- CSS Image Filters
- CSS Flip an Images
- CSS Image Hover Overlay Slide from the right
- CSS Image Hover Overlay Slide from the left
- CSS Image Hover Overlay Slide from the bottom
- CSS Image Hover Overlay Slide from the top
- CSS Image Hover Overlay Fade In A Box
- CSS Image Hover Overlay Fade In Text
- CSS Image Hover Overlay
- CSS Text Over an Image
- CSS Transparent Images
- CSS Center an Images
- CSS Card Images
- CSS Responsive Images
- CSS Thumbnail Images
- CSS Rounded Images
- CSS Images (All Properties)
- CSS Button On Image
- CSS Button Animation
- CSS Button Groups
- CSS Disabled Button
- CSS Button Shadows
- CSS Hoverable Buttons
- CSS Button Borders
- CSS Button Shape
- CSS Button Width
- CSS Button Font Sizes
- CSS Button Colors
- CSS Buttons (All Properties)
- CSS Radial Gradients
- CSS Linear Gradients
- CSS Gradients (All Properties)
- CSS Image Hover Dropdown
- CSS Navigation Dropdown Menu
- CSS Text Hover Dropdown
- CSS Dropdown
- CSS Fixed H. Navigation Bar
- CSS Horizontal Navigation Bar
- CSS Vertical Navigation Bar