⚠️ CSS Individual Transform Properties are not supported in your browser.
revision:
- applies a 2D or 3D transformation to an element.
This property allows you to rotate, scale, move, skew, etc., elements. Only transformable elements can be transformed. That is, all elements whose layout is governed by the CSS box model except for non-replaced inline boxes, table-column boxes, and table-column-group boxes.
Property values:
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.
examples
/* Keyword values */
transform: none;
/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
examples
/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
/* Global values */
transform: inherit;
transform: initial;
transform: revert;
transform: unset;
The translate value changes the position left/right and up/down of the element on the page based on the given X (horizontal) and Y (vertical) axes parameters. The positive X-axis parameter moves the element to the right, and the negative will do so to the left. The positive Y-axis parameter moves the element down, and the negative does so towards up.
<style>
#box{width: 10vw; height: 10vw; background-color: rgba(55, 255, 5, 0.582); border-radius: 1.2vw;
border: solid rgb(110, 235, 110)
0.4vw;}
#box:hover{ transform: translate(80%,-20%);}
</style>
<div>
<div class="container" style="margin-left:4vw;">
<h4>Hover!</h4>
<div id="box"></div>
</div>
</div>
The skew value tilts the element towards a direction based on the provided parameters to its X and Y axes. The positive X parameter tilts it towards the right, and the negative tilts it towards the left. At the same time, the positive Y tilts it towards down, and the negative tilts it upwards.
Codes:
<style>
#box_1{width: 12vw; height: 12vw; background-color: rgba(246, 200, 250, 0.932);
border-radius: 1.2vw; border: solid
rgb(246, 169, 253) 0.4vw;}
#box_1:hover{ transform: skew(30deg,30deg);}
</style>
<div>
<div class="container_a" style="margin-left:4vw;">
<h4>Hover!</h4>
<div id="box_1"></div>
</div>
</div>
The scale value can increase or decrease the size of an HTML element based on the given parameters. The positive value increases the size in the X or Y direction, while the negative value decreases the size in X or Y direction.
<style>
#box_2{width: 10vw; height: 10vw; background-color: rgba(172, 221, 243, 0.842); border-radius: 1.2vw; border: solid
rgb(172, 221, 243) 0.4vw;}
#box_2:hover{ transform: scale(0.5);}
</style>
<div>
<div class="container_b" style="margin-left:4vw;">
<h3>Hover!
<div id="box_2"></div>
</div>
</div>
The rotate value can rotate an element in the clockwise or anticlockwise direction based on a specified number of degrees. The positive degree rotates the element in the clockwise direction and the negative parameter rotates the element in the anticlockwise direction.
<style>
#box_3{width: 10vw; height: 10vw; background-color: green; border-radius: 1.2vw; border: solid yellow 0.4vw;}
#box_3:hover{ transform: rotate(35deg);}
</style>
<div>
<div class="container_c" style="margin-left:4vw;">
<h4>Hover!</h4>
<div id="box_3"></div>
</div>
</div>
Codes:
<style>
#box_4{width: 10vw; height: 10vw; background-color: pink; border-radius: 1.2vw; border: solid seagreen 0.4vw;}
#box_4:hover{transform: rotate(-45deg) scale(1.5) translateX(10vw); background-color:blue;}}
</style>
<div>
<div class="container_d" style="margin-left:4vw;">
<h4>Hover!</h4>
<div id="box_4"></div>
</div>
</div>
Codes:
<style>
div.a {width: 10vw; height: 8vw; margin-left:4vw; background-color: yellow; -ms-transform: rotate(20deg); transform: rotate(20deg);}
div.b {width: 10vw; height: 8vw; margin-left:4vw; background-color: blue; -ms-transform: skewY(20deg); transform: skewY(20deg);}
div.c {width: 10vw; height: 8vw; margin-left:4vw; background-color: green; -ms-transform: scaleY(1.5); transform: scaleY(1.5);}
</style>
<div>
<h4>transform: rotate(20deg):</h4> <br>
<div class="a">Hello World!</div>
<br>
<h4>transform: skewY(20deg):</h4><br>
<div class="b">Hello World!</div>
<br>
<h4>transform: scaleY(1.5):</h4><br>
<div class="c">Hello World!</div><br>
</div>
- allows you to change the position of transformed elements. 2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element.
Note: This property must be used together with the "transform property".
Property values:
x-axis: defines where the view is placed at the x-axis. Possible values: left, center, right, length, %
y-axis: defines where the view is placed at the y-axis. Possible values: left, center, right, length, %
z-axis: defines where the view is placed at the z-axis (for 3D transformations). Possible values: length
initial: sets this property to its default value.
inherit: inherits this property from its parent element.
<div>
<div id="DIV-A">
<div id="DIV-B">HELLO</div>
</div>
</div>
<style>
#DIV-A {position: relative;height: 20vw; width: 20vw; margin: 2vw; padding: 1vw;
border: 0.1vw solid black;}
#DIV-B {padding: 5vw; position: absolute; border: 0.2vw solid black; background-color: red;
transform: rotate(45deg); transform-origin: 20% 40%;}
</style>
- specifies how nested elements are rendered in 3D space.
Note: This property must be used together with the "transform property".
Property values:
flat: specifies that child elements will NOT preserve its 3D position. This is default
preserve-3d: specifies that child elements will preserve its 3D position
initial: sets this property to its default value.
inherit: inherits this property from its parent element.
<div>
<div id="DIV-C">
<div id="DIV-D">HELLO
<div id="DIV-E">YELLOW</div>
</div>
</div>
</div>
<style>
#DIV-C {position: relative; height: 20vw; width: 20vw; margin: 3vw; padding: 1vw;
border: 0.1vw solid black;}
#DIV-D {padding: 4vw; position: absolute; border: 0.1vw solid black;
background-color: red; transform: rotateY(60deg);transform-style: preserve-3d;}
#DIV-E {padding: 4vw; position: absolute; border: 0.2vw solid black;
background-color: yellow; transform: rotateY(-60deg);}
</style>
These new properties work like the legacy transform functions but without the legacy challenges.
Where the legacy transform functions are applied in order from left to right, the individual transform properties are applied in a much more favorable sequence: 1. translate 2. rotate 3. scale.
That means both of the following code snippets give the same result:
.transform--individual {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
.transform--individual-alt {
rotate: 30deg;
translate: 50% 0;
scale: 1.2;
}
In both cases the targeted elements will first be "translated" by 50% on the X-axis, then "rotated" by 30deg, and finally "scaled" by 1.2.
If one of the individual transform properties are declared along with a "transform property", then the "individual transforms" get applied first (translate, rotate, and then scale) with the "transform" last (inside)
⚠️ Your browser does not support Individual CSS Transform Properties. So this demo won't work.
Please use Chrome 104, Firefox 72, or Safari 14.1
<div>
<div id="target"></div>
<div class="warning">
<p>⚠️ Your browser does not support Individual CSS Transform Properties. So this demo won't work.<br />
Please use Chrome 104, Firefox 72, or Safari 14.1</p>
</div>
<button>restart animation</button>
</div>
<style>
@keyframes combined {
0% { translate: 0% 0; }
100% { translate: 100% 0; }
0%, 100% { scale: 1; }
5%, 95% { scale: 1.2; }
0% { rotate: 0deg; }
10%, 90% { rotate: 180deg; }
100% { rotate: 360deg; }
}
#target { width: 5vw; aspect-ratio: 1; background: blue; border-radius: 1vw; animation: combined 2s;
animation-fill-mode: forwards;}
button { position: relative; right: 1vw; top: 1vw; padding: 0.5vw;}
/** show a warning in browers that don't support it **/
.warning {padding: 1vw; border: 0.1vw solid #ccc; max-width: 100%; }
.warning p {margin: 0; padding: 0; text-align: center;}
@supports (scale: 1) {
.warning {display: none;}
}
</style>
<script>
document.querySelector("button").addEventListener("click", (e) => {
document.querySelector("#target").getAnimations().forEach((anim) => {
anim.cancel();
anim.play();
});
});
</script>
⚠️ Your browser does not support Individual CSS Transform Properties. So this demo won't work.
Please use Chrome 104, Firefox 72, or Safari 14.1
<div>
<div id="target-A"></div>
<div class="warning-A">
<p>⚠️ Your browser does not support Individual CSS Transform Properties. So this demo won't work.<br />
Please use Chrome 104, Firefox 72, or Safari 14.1</p>
</div>
<button id="btn">restart here animation</button>
</div>
<style>
@keyframes move {
0% { translate: 0% 0; }
100% { translate: 100% 0; }
}
@keyframes scale {
0%, 100% { scale: 1; }
5%, 95% { scale: 1.2; }
}
@keyframes rotate {
0% { rotate: 0deg; }
10%, 90% { rotate: 180deg; }
100% { rotate: 360deg; }
}
#target-A {width: 5vw; aspect-ratio: 1; background: white; border-radius: 1vw;
animation: move 2s, scale 2s, rotate 2s;animation-fill-mode: forwards; }
button#btn {position: relative; right: 1vw; top: 1vw;}
/** show a warning in browers that don't support it **/
.warning {padding: 1vw; border: 0.1vw solid #ccc;}
.warning-A p { margin: 0; padding: 0; text-align: center;}
@supports (scale: 1) {
.warning-A { display: none; }
}
</style>
<script>
document.querySelector("#btn").addEventListener("click", (e) => {
document.querySelector("#target-A").getAnimations().forEach((anim) => {
anim.cancel();
anim.play();
});
});
</script>
<main>
<div id="item"></div>
<div class="not-supported">⚠️ CSS Individual Transform Properties are not supported in your browser.</div>
</main>
<style>
#item:before, #item:after {block-size: 5vw; border-radius: 1vw; content: ""; inline-size: 5vw;
inset-block-start: 0; inset-inline-start: 30%; position: absolute; translate: -50% 0;}
#item:before { animation: animate 5s linear infinite; background: var(--color-primary-darken-200);}
#item:after { animation: animate-alt 5s linear infinite; background: var(--color-primary-lighten-200); }
@keyframes animate {
10%, 15% {scale: 1; translate: 0; }
16% {scale: 0.5; }
18% {scale: 1.5;}
20% {rotate: 0deg; scale: 1.5;}
50% { rotate: 180deg; translate: 50% 0;}
65% {rotate: 180deg; translate: -50% 0;}
}
@keyframes animate-alt {
10%, 15% { scale: 1; translate: -150% 0;}
16% {scale: 0.5;}
18% {scale: 1.5;}
20% {rotate: 0deg;scale: 1.5;}
50% {rotate: -180deg; translate: -150% 0;}
65% {rotate: -180deg; translate: -50% 0;}
}
:root {
--color-aux-50: rgb(10, 10, 11);
--color-aux-100: rgb(29, 29, 32);
--color-aux-200: rgb(48, 48, 54);
--color-aux-300: rgb(77, 77, 86);
--color-aux-400: rgb(96, 96, 108);
--color-aux-500: rgb(115, 115, 130);
--color-aux-600: rgb(147, 147, 159);
--color-aux-700: rgb(169, 169, 178);
--color-aux-800: rgb(190, 190, 197);
--color-aux-900: rgb(223, 223, 226);
--color-aux-950: rgb(242, 239, 233);
--color-primary-lighten-200: #504573;
--color-primary-lighten-100: #473d66;
--color-primary: #3b3355;
--color-primary-darken-100: #352e4d;
--color-primary-darken-200: #2c2640;
--font-family-primary: "Raleway", sans-serif;
--font-size--2: clamp(0.69rem, calc(0.69rem + 0.04vw), 0.72rem);
--font-size--1: clamp(0.83rem, calc(0.81rem + 0.11vw), 0.9rem);
--font-size-0: clamp(1rem, calc(0.96rem + 0.21vw), 1.13rem);
--font-size-1: clamp(1.2rem, calc(1.13rem + 0.34vw), 1.41rem);
--font-size-2: clamp(1.44rem, calc(1.33rem + 0.53vw), 1.76rem);
--font-size-3: clamp(1.73rem, calc(1.57rem + 0.78vw), 2.2rem);
--font-size-4: clamp(2.07rem, calc(1.85rem + 1.12vw), 2.75rem);
--font-size-5: clamp(2.49rem, calc(2.17rem + 1.58vw), 3.43rem);
--space-base: 4px;
--space-base-half: calc(var(--space-base) / 2);
--space-base-1x: var(--space-base);
--space-base-2x: calc(var(--space-base) * 2);
--space-base-3x: calc(var(--space-base) * 3);
--space-base-4x: calc(var(--space-base) * 4);
--space-base-6x: calc(var(--space-base) * 6);
--space-base-8x: calc(var(--space-base) * 8);
--space-base-12x: calc(var(--space-base) * 12);
--space-base-16x: calc(var(--space-base) * 16);
--space-base-24x: calc(var(--space-base) * 24);
}
main {block-size: 20vw; margin-block: 2vw;position: relative;}
.not-supported {background: #600; border-radius: 0.8vw; color: #fff; font-size: 0.9vw;
padding: 0.5vw 1vw; position: relative; inset-block-end: 1vw; inset-inline-start: 1vw;
@supports (scale: 1) {
display: none;
}
}
</style>