How to use CSStransform
property
Transformation allows you to translate, rotate, scale and tilt elements in 2D or 3D space. They are very cool CSS features, especially when combined with animation.
2D conversion
Thistransform
The properties accept the following functions:
translate()
Move elementsrotate()
Rotating elementscale()
Scale the size of the elementskew()
Distorted or skewed elementsmatrix()
A way to perform any of the above operations using a matrix of 6 elements, a not very friendly syntax, but verbose
We also have axis-specific functions:
translateX()
Move elements around on the X axistranslateY()
Move elements around on the Y axisscaleX()
Scale the size of the element on the X axisscaleY()
Scale the size of the element on the Y axisskewX()
Distort or tilt the element on the X axisskewY()
Distort or tilt the element on the Y axis
This is a conversion example, this change will change.box
The element width is multiplied by 2 (repeat), and the height is multiplied by 0.5 (reduced by half):
.box {
transform: scale(2, 0.5);
}
transform-origin
Let's set the origin ((0, 0)
Coordinates) to transform, let's change the center of rotation.
Combine multiple transformations
You can combine multiple transformations by separating each function with a space.
E.g:
transform: rotateY(20deg) scaleX(3) translateY(100px);
3D conversion
We can go one step further and move the elements to 3D space instead of 2D space. For 3D, we added another axis Z, which increases the depth of the visual effect.
useperspective
Property, you can specify the distance between the 3D object and the viewer.
example:
.3Delement {
perspective: 100px;
}
perspective-origin
Determine the appearance of the viewer position and how we can view it on the X and Y axis.
Now, we can use other functions to control the Z axis. These functions add up to the transformation of other X and Y axes:
translateZ()
rotateZ()
scaleZ()
And the corresponding shorthandtranslate3d()
,rotate3d()
withscale3d()
As usetranslateX()
,translateY()
withtranslateZ()
Function etc.
Download mine for freeCSS Manual
More CSS tutorials:
- Flexbox guide
- CSS grid tutorial
- CSS variables (custom attributes)
- Introduction to PostCSS
- CSS guarantees metallicity
- How to center an element using CSS
- CSS system fonts
- How to print HTML with styles
- Getting started with CSS transition
- CSS animation tutorial
- Introduction to CSS
- CSS guide
- How to set up Tailwind with PurgeCSS and PostCSS
- Tail wind cheat sheet
- How to continuously rotate an image using CSS
- Use CSS to make the table responsive
- How to debug CSS by halving
- CSS selector
- CSS cascade
- CSS specificity
- CSS attribute selector
- CSS colors
- CSS Unit
- CSS url()
- CSS typography
- CSS Box model
- CSS position properties
- CSS media queries and responsive design
- CSS function query
- CSS conversion
- How to style a list with CSS
- CSS vendor prefix
- CSS inheritance
- CSS pseudo-classes
- CSS pseudo elements
- Style HTML tables with CSS
- CSS Display property
- CSS calc() function
- CSS border
- Use @import to import CSS files
- CSS error handling
- CSS filter
- CSS Box size
- CSS background
- CSS comments
- CSS fonts
- CSS padding
- CSS float property and clear
- CSS normalization
- CSS z-index property
- How to disable text selection using CSS
- How to use CSS to place items at the bottom of their container
- How to invert colors using CSS
- Responsive front tags in CSS
- Responsive YouTube video embedding
- What is a good CSS breakpoint value for responsive design?
- How to align the center in Flexbox