CSS property transform allows you to change the state of an element which can be shape, size or position or either two of them or all three at once. You can translate, rotate, scale and skew elements easily using CSS. You can set up HTML elements to be displayed in a unique degree directly on page load and that will look nice but if you want such changes to happen on user interaction like mouse hover, you will need to add CSS property transition to make them look visually pleasing. CSS property trasition allows you to add smooth transition over a defined time duration while transforming HTML elements.
In order to create a transition effect, you must specify two things which are listed below.
The transition effect will initiate once the specified HTML element changes its value and ends after specified duration. If the duration part is not specified, the transition will have no effect as the default value is 0.
<div class="transition-demo"></div>
<style>
.transition-demo{
width: 100px;
height: 100px;
background: #096;
transition: width 2s, height 2s;
}
.transition-demo:hover{
width: 200px;
height: 200px;
}
</style>
You can add multiple transition properties at once too separated by a comma. The transition effect allows the HTML element to return back to its initial state too smoothly.
The CSS property transition-timing-function defines the speed curve of the transition effect which can have any one of the following values.
| Value | Description |
|---|---|
| ease | defines a transition effect with a slow start, fast in the middle of the duration and end slowly (default) |
| linear | defines a transition effect with the same speed from start to end |
| ease-in | defines a transition effect with a slow start |
| ease-out | defines a transition effect with a slow end |
| ease-in-out | defines a transition effect with a slow start and end |
| cubic-bezier(n,n,n,n) | lets you define your own values for speed. Minimum value for n is 0 while maximum value is 1. First value defines the speed at the start while the last value defines the speed at the end. |
.transition{
transition-timing-function: linear;
}
The CSS property transition-delay property defines a pause (in seconds) before the transition effect to initiates.
<div class="transition-delay"></div>
<style>
.transition-delay{
width: 100px;
height: 100px;
background: #096;
transition: width 2s, height 2s;
transition-timing-function: cubic-bezier(0.42,0.97,0.58,0.2);
transition-delay: 0.5s;
}
.transition-delay:hover{
width: 200px;
height: 200px;
}
</style>
CSS property transform allow you to translate, rotate, scale, and skew elements which makes an element change shape, size or position. CSS supports 2D and 3D transformations. The transitions look better with transition duration added to them.
These are the 2D transformation methods that CSS supports.
The translate() method moves an element from its current position according to the parameters given for the X-axis and the Y-axis. The method translate() supports two values where the first value is applied to X-axis and the second value is applied to Y-axis. If single value is given, the second value will be assumed as 0. The method translateX() takes one value which is applied to the X-axis of the element whereas translateY() takes single value for Y-axis.
<div class="translate"></div>
<style>
.translate{
height: 100px;
width: 100px;
background: #151f28;
transition: 0.5s;
}
.translate:hover{
transform: translate(30px,10px);
}
</style>
The rotate() method rotates an element clockwise or counter-clockwise according to a defined degree.
<div class="rotate"></div>
<style>
.rotate{
width: 100px;
height: 100px;
background: #151f28;
transition: 2s;
}
.rotate:hover{
transform: rotate(360deg);
}
</style>
The scale() method increases or decreases the size of an element according to the parameters given for the width and height.
<div class="scale"></div>
<style>
.scale{
width: 100px;
height: 100px;
background: #151f28;
transition: 2s;
}
.scale:hover{
transform: scale(1.5);
}
</style>
The skew() method skews an element along the defined axis by the defined angle. Skew can be used as skewX() or skewY() too where skewX() defines the skewness of X-axis and skewY() defines the skewnwss of Y-axis. If skew() is used with single value, the value for Y is taken as 0.
<div class="skew"></div>
<style>
.skew{
width: 100px;
height: 100px;
background: #151f28;
transition: 2s;
}
.skew:hover{
transform: skew(-45deg, 30deg);
}
</style>
The matrix() method combines all the 2D transform methods into one. It accepts six parameters containing mathematic functions which allows you to rotate, scale, translate and skew elements all at once.
The parameters for matrix method are as follows.
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
<div class="matrix"></div>
<style>
.matrix{
width: 100px;
height: 100px;
background: #151f28;
transition: 2s;
margin-bottom: 10px;
}
.matrix:hover{
transform: matrix(1.2, 0.5, 0.5, 1.2, 10, 10);
}
</style>
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation using a matrix of six values |
| translate(x,y) | Defines a 2D translation moving the element along the X-axis and Y-axis |
| translateX(n) | Defines a 2D translation moving the element along the X-axis |
| translateY(n) | Defines a 2D translation moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation changing width and height of the element |
| scaleX(n) | Defines a 2D scale transformation changing width of the element |
| scaleY(n) | Defines a 2D scale transformation changing height of the element |
| rotate(angle) | Defines a 2D rotation in a defined angle |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X-axis 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 |
CSS allows you to add 3D transformations to your web page as well.
The rotateX() method rotates an element around its X-axis at a defined degree.
<div class="rotatex"></div>
<style>
.rotatex{
height: 100px;
width: 100px;
background: #151f28;
transition: 1s;
}
.rotatex:hover{
transform: rotateX(150deg);
}
</style>
The rotateY() method rotates an element around its Y-axis at a defined degree.
<div class="rotatey"></div>
<style>
.rotatey{
height: 100px;
width: 100px;
background: #151f28;
transition: 1s;
}
.rotatey:hover{
transform: rotateY(150deg);
}
</style>
The rotateZ() method rotates an element around its Z-axis at a defined degree.
<div class="rotatez"></div>
<style>
.rotatez{
height: 100px;
width: 100px;
background: #151f28;
transition: 1s;
}
.rotatez:hover{
transform: rotateZ(-180deg);
}
</style>
CSS translate() method supports 3D translations too. Elements translated with 3D translate() method looks better with CSS perspective property defined. It defines the way an element is seen by the user. Here is an example of 3D translate() method.
<div class="box">
<div class="side top">1</div>
<div class="side left">2</div>
<div class="side right">3</div>
</div>
<style>
.box{
width: 100px;
height: 100px;
position: relative;
margin: 50px;
transform: perspective(2000px) rotateX(-50deg) rotateY(60deg);
transform-style: preserve-3d;
transition: 0.5s;
}
.side{
position: absolute;
width: 100%;
height: 100%;
font-size: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.top{
background: red;
transform: rotateX(90deg) translate3d(0, 0, 50px);
}
.left{
background: green;
transform: rotateY(-90deg) translate3d(0, 0, 50px);
}
.right{
background: blue;
transform: translate3d(0, 0, 50px);
}
.box:hover{
transform: perspective(2000px) rotateX(-15deg) rotateY(30deg);
}
</style>
| Function | Description |
|---|---|
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Defines a 3D transformation using a matrix of 16 values |
| translate3d(x,y,z) | Defines a 3D translation |
| translateZ(z) | Defines a 3D translation using only the value for the Z-axis |
| scale3d(x,y,z) | Defines a 3D scale transformation |
| scaleZ(z) | Defines a 3D scale transformation by using a value for the Z-axis |
| 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 |
| Properties | Description |
|---|---|
| transform-origin | Allows you to change the position on transformed elements |
| transform-style | Specifies how nested elements are rendered in 3D space |
| perspective | Specifies the perspective on how 3D elements are viewed |
| perspective-origin | Specifies the bottom position of 3D elements |
| backface-visibility | Defines whether or not an element should be visible when not facing the screen |
Leave a comment