CSS Transitions And Transforms


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.

CSS Transitions

In order to create a transition effect, you must specify two things which are listed below.

  1. CSS property you want to add an effect to
  2. Duration of the effect

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.

Defining Speed Curve for Transition

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;
}

Delay in Transition

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 Transform

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.

CSS 2D Transforms

These are the 2D transformation methods that CSS supports.

  1. translate()
  2. rotate()
  3. scale()
  4. skewX()
  5. skewY()
  6. matrix()

Translate

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>

Rotate

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>

Scale

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>

Skew

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>

Matrix

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> 

2D Transform Methods

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 3D Transforms

CSS allows you to add 3D transformations to your web page as well.

Rotate X

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>

Rotate Y

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>

Rotate Z

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>

Translate 3D

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.

A
B
C
D
E
F
<div class="translate-content-holder">
  <div class="translate3d">
    <div class="face front">A</div>
    <div class="face back">B</div>
    <div class="face right">C</div>
    <div class="face left">D</div>
    <div class="face top">E</div>
    <div class="face bottom">F</div>
  </div>
</div>

<style>
.translate-content-holder{
  background: linear-gradient(#066,#d7d7d7);
  perspective: 800px;
  perspective-origin: 150% 150%;
  height: 400px;
  position: relative;
}
.translate3d{
  height: 100px;
  width: 100px;
  color: #fff;
  transition: 1s;
  margin-bottom: 10px;
  perspective: 800px;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -815px);
  position: absolute;
  perspective-origin: left;
}
.face{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
}
.front {
  background: rgba(90,90,90,.7);
  transform: translateZ(50px);
}
.back {
  background: rgba(0,210,0,.7);
  transform: rotateY(180deg) translateZ(50px);
}
.right {
  background: rgba(210,0,0,.7);
  transform: rotateY(90deg) translateZ(50px);
}
.left {
  background: rgba(0,0,210,.7);
  transform: rotateY(-90deg) translateZ(50px);
}
.top {
  background: rgba(210,210,0,.7);
  transform: rotateX(90deg) translateZ(50px);
}
.bottom {
  background: rgba(210,0,210,.7);
  transform: rotateX(-90deg) translateZ(50px);
}
.translate3d:hover{
  transform: translate3d(50px, -115px, -250px);
}
</style>

3D Transform Methods

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

Other CSS properties related to 3D Transforms

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