CSS3 3D Transform

Next ❯CSS3 Transition

Used to allow 3D transformation to an element

  • 3D is all about, playing with X-axis, Y-axis & Z-axis
  • turned_in_notProperties
    • transform
    • transform-origin
    • backface-visibility
    • transform-style
    • perspective
    • perspective-origin
  • transform: Property 3D methods
  • turned_in_not3D Transform Methods
    • perspective()
    • translate3d()
      • translateX()
      • translateY()
      • translateZ()
    • rotate3d()
      • rotateX()
      • rotateY()
      • rotateZ()
    • scale3d()
      • scaleX()
      • scaleY()
      • scaleZ()

    • matrix3d()
  • Alert: Below we are using limited values, you can use more values( +ve or -ve ) as per your need

perspective( )

It provides you a perspective view for a 3D transformed element

  • It's required along with other methods to visualize 3D effect
  • Note! If declaring, declare it before all other methods
  • Perspective means, at what distance the element is placed from the view

perspective

value

perspective(300px) rotateX(50deg);

#perspective {
/*perspective(value-In_pixels)*/
  transform:perspective(300px) rotateX(50deg);
}
perspectivesubject
perspectiveclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#perspective {
/*perspective(value-In_pixels);*/
 transform:perspective(300px) rotateX(50deg);
 height:100px;
 width:100px;
 background-color:#3ba8df;
 box-shadow: 4px 4px grey;
}
</style>
</head>
<body>
  <div id="perspective" style="margin:auto;">
  <h5 style="text-align:center;">perspective</h5>
  </div>
</body>
</html>

Translate3d

It changes the position of the element in 3D space

  • For translateX() & translateY() , See it in 2D transform
  • The values can be in pixels, %, or in other units

translateZ

Z

perspective(300px) translateZ(10px);

#translatez {
/*translateZ(Z-axis-value)*/
  transform:perspective(300px) translateZ(10px);
}
translateZsubject
translateZclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#translatez {
/*translateZ(Z-axis-value)*/
 transform:perspective(300px) translateZ(10px);
 height:100px;
 width:100px;
 background-color:#3ba8df;
 box-shadow: 4px 4px grey;
}
</style>
</head>
<body>
  <div id="translatez" style="margin:auto;">
  <h5 style="text-align:center;">translateZ</h5>
  </div>
</body>
</html>

translate3d

translateX

translateY

translateZ

perspective(300px) translate3d(10px,10px,10px);

#translate {
/*translate3d(translateX,translateY,translateZ);*/
  transform:perspective(300px) translate3d(10px,10px,10px);
}
translate3dsubject
translate3dclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#translate {
/*translate3d(translateX,translateY,translateZ);*/
 transform:perspective(300px) translate3d(10px,10px,10px);
 height:100px;
 width:100px;
 background-color:#00ccc3;
 box-shadow: 0 1px 2px #040404;
}
</style>
</head>
<body>
  <div id="translate" style="margin:auto;">
  <h5 style="text-align:center;">translate</h5>
  </div>
</body>
</html>

Rotate3d

It rotates the element in 3D space


rotateX

X

rotateX(10deg);

#rotatex {
/*transform:rotateX(In_degree);*/
  transform:rotateX(10deg);
}
rotateXsubject
rotateXclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#rotatex {
/*transform:rotateX(In_degree);*/
 transform:rotateX(10deg);
 height:100px;
 width:100px;
 background-color:#ef5195;
 box-shadow: 4px 4px grey;
}
</style>
</head>
<body>
  <div id="rotatex" style="margin:auto;">
  <h5 style="text-align:center;">rotateX</h5>
  </div>
</body>
</html>

rotateY

Y

rotateY(10deg);

#rotatey {
/*transform:rotateY(In_degree);*/
  transform:rotateY(10deg);
}
rotateYsubject
rotateYclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#rotatey {
/*transform:rotateY(In_degree);*/
 transform:rotateY(10deg);
 height:100px;
 width:100px;
 background-color:#ffdd52;
 box-shadow: 4px 4px grey;
}
</style>
</head>
<body>
  <div id="rotatey" style="margin:auto;">
  <h5 style="text-align:center;">rotateY</h5>
  </div>
</body>
</html>

rotateZ

Z

rotateZ(10deg);

#rotatez {
/*transform:rotateZ(In_degree);*/
  transform:rotateZ(10deg);
}
rotateZsubject
rotateZclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#rotatez {
/*transform:rotateZ(In_degree);*/
 transform:rotateZ(10deg);
 height:100px;
 width:100px;
 background-color:#ffdd52;
 box-shadow: 4px 4px grey;
}
</style>
</head>
<body>
  <div id="rotatez" style="margin:auto;">
  <h5 style="text-align:center;">rotateZ</h5>
  </div>
</body>
</html>

rotate3d

Angle

rotate3d(1,1,1,30deg);

#rotate {
/*transform:rotate3d(x-coordinate,y-coordinate,z-coordinate,angle);*/
  transform:rotate(1,1,1,30deg);
}
rotate3dsubject
rotatedclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#rotate {
/*transform:rotate3d(x-coordinate,y-coordinate,z-coordinate,angle);*/
 transform:rotate(1,1,1,30deg);
 height:100px;
 width:100px;
 background-color:#00ccc3;
 box-shadow: 4px 4px grey;
}
</style>
</head>
<body>
  <div id="rotate" style="margin:auto;">
  <h5 style="text-align:center;">rotate3d</h5>
  </div>
</body>
</html>

Scale3d

It changes the size of the element in 3D space

  • For scaleX() & scaleY() , See it in 2D transform
  • Note! In below example we created & use a 3D object (cube) to show how scaleZ() work
    In the cube, all faces/sides are child of black plane inside it
123456

Z

perspective(300px) scaleZ(1) rotateX(-30deg) rotateY(30deg);

Above, The black plane inside the cube is been affected by scalez( ) method
and also cube has been rotated for better visualization

#plane {
/*scaleZ(Z-axis-value)*/
  transform:perspective(300px) scaleZ(1) rotateX(-30deg) rotateY(30deg);
}
scaleZsubject
scaleZclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#plane {
   width: 80px; height:80px;margin:25px auto;
   perspective: 300px;
   transform-style: preserve-3d;
   transform:perspective(300px) scaleZ(1) rotateX(-30deg) rotateY(30deg);
   perspective-origin: top left;
   background: rgba(0,0,0, 0.6);
 }
 .face{
   position: absolute;
   width: 100%;
   height: 100%;
   background: rgba(242, 227, 60, 0.8);
   border: 1px solid rgba(0,0,0,.5);
   line-height: 80px;
   font-size:60px;
   color: white;
   text-align: center;
 }
 .face.front{transform:translateZ(40px);}
 .face.back{transform:rotateY(-180deg) translateZ(40px);}
 .face.top{transform:rotateX(90deg) translateZ(40px);background: rgba(234, 92, 92, 0.4);}
 .face.bottom{transform:rotateX(-90deg) translateZ(40px);background: rgba(234, 92, 92, 0.4);}
 .face.left{transform:rotateY(-90deg) translateZ(40px);background: rgba(55, 243, 175, 0.4);}
 .face.right{transform:rotateY(90deg) translateZ(40px);background: rgba(55, 243, 175, 0.4);}
</style>
</head>
<body>
  <div id="plane">
    <span className="face front">1</span>
    <span className="face left">2</span>
    <span className="face bottom">3</span>
    <span className="face top">4</span>
    <span className="face right">5</span>
    <span className="face back">6</span>
  </div>
</body>
</html>
123456

scaleX

scaleY

scaleZ

perspective(300px) scale3d(1,1,1) rotateX(-30deg) rotateY(30deg);

Above, The black plane inside the cube is been affected by scale3d( ) method
and also cube has been rotated for better visualization

#plane {
/*scale3d(scaleX,scaleY,scaleZ);*/
  transform:perspective(300px) scale3d(1,1,1) rotateX(-30deg) rotateY(30deg);
}
scale3dsubject
scale3dclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#plane {
   width: 80px; height:80px;margin:25px auto;
   perspective: 300px;
   transform-style: preserve-3d;
   transform:perspective(300px) scale3d(1,1,1) rotateX(-30deg) rotateY(30deg);
   perspective-origin: top left;
   background: rgba(0,0,0, 0.6);
 }
 .face{
   position: absolute;
   width: 100%;
   height: 100%;
   background: rgba(242, 227, 60, 0.8);
   border: 1px solid rgba(0,0,0,.5);
   line-height: 80px;
   font-size:60px;
   color: white;
   text-align: center;
 }
 .face.front{transform:translateZ(40px);}
 .face.back{transform:rotateY(-180deg) translateZ(40px);}
 .face.top{transform:rotateX(90deg) translateZ(40px);background: rgba(234, 92, 92, 0.4);}
 .face.bottom{transform:rotateX(-90deg) translateZ(40px);background: rgba(234, 92, 92, 0.4);}
 .face.left{transform:rotateY(-90deg) translateZ(40px);background: rgba(55, 243, 175, 0.4);}
 .face.right{transform:rotateY(90deg) translateZ(40px);background: rgba(55, 243, 175, 0.4);}
</style>
</head>
<body>
  <div id="plane">
    <span className="face front">1</span>
    <span className="face left">2</span>
    <span className="face bottom">3</span>
    <span className="face top">4</span>
    <span className="face right">5</span>
    <span className="face back">6</span>
  </div>
</body>
</html>

Matrix3d

It defines a 3D transformation as 4x4 homogeneous matrix and is specified with 16 values

matrix3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4);
Here, [a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,d4] are the linear transformation
[a4,b4,c4] are the translation to apply



matrix3d

#matrix {
/*transform:matrix3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4);*/
  transform:matrix3d(700,30,0,7,200,900,0,10,0,0,1,0,10,10,0,1300);
}
matrix3dsubject
matrix3dclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#matrix {
/*transform:matrix3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4);*/
 transform:matrix3d(700,30,0,7,200,900,0,10,0,0,1,0,10,10,0,1300);
 /*transform:matrix3d(990,800,0,10,200,1000,0,10,0,0,1,0,10000,990,0,1300);*/
 height:100px;
 width:100px;
 background-color:#3ba8df;
 box-shadow: 0 1px 2px #040404;
}
</style>
</head>
<body>
  <div id="matrix" style="margin:auto;">
  <h5 style="text-align:center;">matrix3d</h5>
  </div>
</body>
</html>


Other Properties

transform-origin

It allows you to change the position of 2D or 3D transformed elements

  • transform: property must required
  • If you are using 2D then just skip z-axis value

translateZ

Propertyxyz
transform-origin:
#box {
  transform:perspective(300px) translateZ(10px);
/*transform-origin: x-axis y-axis z-axis*/
  transform-origin: left top 10em;
}
transform-originsubject
transform-originclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#box {
  transform:perspective(300px) translateZ(10px);
/*transform-origin: x-axis y-axis z-axis*/
  transform-origin: left top 10em;
  height:100px;
  width:100px;
  background-color:#00ccc3;
  box-shadow: 4px 4px grey;
}
</style>
</head>
<body>
  <div id="box" style="margin:auto;">
  <h5 style="text-align:center;">translateZ</h5>
  </div>
</body>
</html>


backface-visibility

It specifies whether or not an element backside should be visible when rotated backside


RotateX

angle

perspective(300px) rotateX(50deg);

backface-visibility:

Rotate above 90deg or below 90deg, and change the backface-visibility value to hidden

#box {
  transform:perspective(300px) rotateX(50deg);
  backface-visibility:visible;
}
backface-visibilitysubject
backface-visibilityclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#box {
 transform:perspective(300px) rotateX(50deg);
 backface-visibility:visible;
 height:100px;
 width:100px;
 background-color:#ffdd52;
 box-shadow: 4px 4px grey;
}
</style>
</head>
<body>
  <div id="box" style="margin:auto;">
  <h5 style="text-align:center;">rotateX</h5>
  </div>
</body>
</html>


PropertiesDescription
transform-styleIt specifies how 3D transformed element's child elements are look like in 3D space
perspectiveIt provides a perspective view for a 3D transformed element's child element
perspective-originIt allows you to change the perspective position of 3D transformed element's child element
  • Perspective means, at what distance the element is placed from the view
  • Note! In below example we created & use a 3D object (cube) since all this three properties affects child elements
    In the cube, all faces/sides are child of black plane inside it

123456
transform-style:
perspective:
perspective-origin:

x-axis

y-axis

#plane {
  transform: rotateX(-30deg) rotateY(30deg);
/*perspective-origin: x-axis y-axis*/
  perspective-origin: left top;
  perspective: 300px;
  transform-style: flat;
}
Examplesubject
Exampleclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#plane {
   width: 80px; height:80px;margin:25px auto;
   perspective: 300px;
   transform-style: preserve-3d;
   transform: rotateX(-30deg) rotateY(30deg);
   perspective-origin: left top;
   background: rgba(0,0,0, 0.6);
 }
 .face{
   position: absolute;
   width: 100%;
   height: 100%;
   background: rgba(242, 227, 60, 0.8);
   border: 1px solid rgba(0,0,0,.5);
   line-height: 80px;
   font-size:60px;
   color: white;
   text-align: center;
 }
 .face.front{transform:translateZ(40px);}
 .face.back{transform:rotateY(-180deg) translateZ(40px);}
 .face.top{transform:rotateX(90deg) translateZ(40px);background: rgba(234, 92, 92, 0.4);}
 .face.bottom{transform:rotateX(-90deg) translateZ(40px);background: rgba(234, 92, 92, 0.4);}
 .face.left{transform:rotateY(-90deg) translateZ(40px);background: rgba(55, 243, 175, 0.4);}
 .face.right{transform:rotateY(90deg) translateZ(40px);background: rgba(55, 243, 175, 0.4);}
</style>
</head>
<body>
  <div id="plane">
    <span className="face front">1</span>
    <span className="face left">2</span>
    <span className="face bottom">3</span>
    <span className="face top">4</span>
    <span className="face right">5</span>
    <span className="face back">6</span>
  </div>
</body>
</html>

  • Note! The difference between perspective( ) & perspective is that:
    perspective( ) method affects parent element &
    perspective property affects parent's child elements

  • CSS3 Transition
❮ Prev 2D Transform
Next ❯CSS3 Transition
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯