CSS transform Property
CSS transform Property
The transform property is used to apply a 2D or 3D transformation to an element. It allows us to rotate, scale, move, skew, translate, etc., elements.
Default Value:-
Its default value is none.
Syntax:-
Its syntax is:- transform: none | transform-functions | initial | inherit;
Further Explanation:-
| Value | Description |
|---|---|
| none | Defines that there should be no transformation |
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Defines a 3D transformation, using a 4x4 matrix of 16 values |
| translate(x,y) | Defines a 2D translation |
| translate3d(x,y,z) | Defines a 3D translation |
| translateX(x) | Defines a translation, using only the value for the X-axis |
| translateY(y) | Defines a translation, using only the value for the Y-axis |
| translateZ(z) | Defines a 3D translation, using only the value for the Z-axis |
| scale(x,y) | Defines a 2D scale transformation |
| scale3d(x,y,z) | Defines a 3D scale transformation |
| scaleX(x) | Defines a scale transformation by giving a value for the X-axis |
| scaleY(y) | Defines a scale transformation by giving a value for the Y-axis |
| scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| rotate3d(x,y,z,angle) | Defines a 3D rotation |
| rotateX(angle) | Defines a 3D rotation along the X-axis |
| rotateY(angle) | Defines a 3D rotation along the Y-axis |
| rotateZ(angle) | Defines a 3D rotation along the Z-axis |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |
| perspective(n) | Defines a perspective view for a 3D transformed element |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Code Explanation
All Tutorials related to CSS Properties
accent-color Property in CSS
align-content Property in CSS
align-items Property in CSS
align-self Property in CSS
all Property in CSS
animation Property in CSS
animation-delay Property in CSS
animation-direction Property in CSS
animation-duration Property in CSS
animation-fill-mode Property in CSS
animation-iteration-count Property in CSS
animation-name Property in CSS
animation-play-state Property in CSS
animation-timing-function Property in CSS
backdrop-filter Property in CSS
backface-visibility Property in CSS
background Property in CSS
background-attachment Property in CSS
background-blend-mode Property in CSS
background-clip Property in CSS
background-color Property in CSS
background-image Property in CSS
background-origin Property in CSS
background-position Property in CSS
background-repeat Property in CSS
background-size Property in CSS
border Property in CSS
border-bottom Property in CSS
border-bottom-color Property in CSS
border-bottom-left-radius Property in CSS
border-bottom-right-radius Property in CSS
border-bottom-style Property in CSS
border-bottom-width Property in CSS
border-collapse Property in CSS
border-color Property in CSS
border-image Property in CSS
border-image-outset Property in CSS
border-image-repeat Property in CSS
border-image-slice Property in CSS
border-image-source Property in CSS
border-image-width Property in CSS
border-left Property in CSS
border-left-color Property in CSS
border-left-style Property in CSS
border-left-width Property in CSS
border-radius Property in CSS
border-right Property in CSS
border-right-color Property in CSS
border-right-style Property in CSS
border-right-width Property in CSS
border-spacing Property in CSS
border-style Property in CSS
border-top Property in CSS
border-top-color Property in CSS
border-top-left-radius Property in CSS
border-top-right-radius Property in CSS
border-top-style Property in CSS
border-top-width Property in CSS
CSS border-width Property
bottom Property in CSS
box-decoration-break Property in CSS
box-shadow Property in CSS
box-sizing Property in CSS
break-after Property in CSS
break-before Property in CSS
break-inside Property in CSS
caption-side Property in CSS
caret-color Property in CSS
@charset Rule in CSS
clear Property in CSS
clip Property in CSS
color Property in CSS
column-count Property in CSS
column-fill Property in CSS
column-gap Property in CSS
column-rule Property in CSS
column-rule-color Property in CSS
column-rule-style Property in CSS
column-rule-width Property in CSS
column-span Property in CSS
column-width Property in CSS
columns Property in CSS
content Property in CSS
counter-increment Property in CSS
counter-reset Property in CSS
cursor Property in CSS
direction Property in CSS
display Property in CSS
empty-cells Property in CSS
filter Property in CSS
flex Property in CSS
flex-basis Property in CSS
flex-direction Property in CSS
flex-flow Property in CSS
flex-grow Property in CSS
flex-shrink Property in CSS
flex-wrap Property in CSS
float Property in CSS
font Property in CSS
@font-face Rule in CSS
font-family Property in CSS
font-feature-settings Property in CSS
font-kerning Property in CSS
font-size Property in CSS
font-stretch Property in CSS
font-style Property in CSS
font-variant Property in CSS
font-variant-caps Property in CSS
font-weight Property in CSS
gap Property in CSS
grid Property in CSS
grid-area Property in CSS
grid-auto-columns Property in CSS
grid-auto-flow Property in CSS
grid-auto-rows Property in CSS
grid-column Property in CSS
grid-column-end Property in CSS
grid-column-gap Property in CSS
grid-column-start Property in CSS
grid-gap Property in CSS
grid-row Property in CSS
grid-row-end Property in CSS
grid-row-gap Property in CSS
grid-row-start Property in CSS
grid-template Property in CSS
grid-template-areas Property in CSS
grid-template-columns Property in CSS
grid-template-rows Property in CSS
hanging-punctuation Property in CSS
height Property in CSS
hyphens Property in CSS
image-rendering Property in CSS
isolation Property in CSS
justify-content Property in CSS
@keyframes Rule in CSS
left Property in CSS
letter-spacing Property in CSS
line-height Property in CSS
list-style Property in CSS
list-style-image Property in CSS
list-style-position Property in CSS
list-style-type Property in CSS
margin Property in CSS
margin-bottom Property in CSS
margin-left Property in CSS
margin-right Property in CSS
margin-top Property in CSS
mask-image Property in CSS
mask-mode Property in CSS
mask-origin Property in CSS
mask-position Property in CSS
mask-repeat Property in CSS
mask-size Property in CSS
max-height Property in CSS
max-width Property in CSS
@media Rule in CSS
min-height Property in CSS
min-width Property in CSS
mix-blend-mode Property in CSS
object-fit Property in CSS
object-position Property in CSS
opacity Property in CSS
order Property in CSS
orphans Property in CSS
outline Property in CSS
outline-color Property in CSS
outline-offset Property in CSS
outline-style Property in CSS
outline-width Property in CSS
overflow Property in CSS
overflow-wrap Property in CSS
overflow-x Property in CSS
overflow-y Property in CSS
padding Property in CSS
padding-bottom Property in CSS
padding-left Property in CSS
padding-right Property in CSS
padding-top Property in CSS
page-break-after Property in CSS
page-break-before Property in CSS
page-break-inside Property in CSS
perspective Property in CSS
perspective-origin Property in CSS
pointer-events Property in CSS
position Property in CSS
quotes Property in CSS
resize Property in CSS
right Property in CSS
row-gap Property in CSS
scroll-behavior Property in CSS
tab-size Property in CSS
table-layout Property in CSS
text-align Property in CSS
text-align-last Property in CSS
text-decoration Property in CSS
text-decoration-color Property in CSS
text-decoration-line Property in CSS
text-decoration-style Property in CSS
text-decoration-thickness Property in CSS
text-emphasis Property in CSS
text-indent Property in CSS
text-justify Property in CSS
text-overflow Property in CSS
text-shadow Property in CSS
text-transform Property in CSS
top Property in CSS
transform Property in CSS
transform-origin Property in CSS
transform-style Property in CSS
transition Property in CSS
transition-delay Property in CSS
transition-duration Property in CSS
transition-property Property in CSS
transition-timing-function Property in CSS
unicode-bidi Property in CSS
user-select Property in CSS
vertical-align Property in CSS
visibility Property in CSS
white-space Property in CSS
widows Property in CSS
width Property in CSS
word-break Property in CSS
word-spacing Property in CSS
word-wrap Property in CSS
writing-mode Property in CSS
z-index Property in CSS
