CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

CSS 3D Transform

Introduction

To understand 3D transformation property of transform you need to first understand the difference between 2D and 3D transform.

2D transform is a CSS effect which transforms the elements according to the size, shape and position. It transforms the element along the x-axis and y-axis.

3D transform creates the illusion of depth and space over the two-dimensional screen. It is possible using the z-axis along with the x-axis and y-axis. 3D transform manipulates the element not only along the width and height but also along the depth.

The main purpose of 3D transform is to enhance the visual effects of a web page and to give rich user experience.

2D - Transform

Property

  • transform :
    transform property is used inside <style> tag. Various functions like translate(), rotate(), scale() and skew() can be used using this property.
    Syntax:
    transform: method (values) ;
    Example:
    transform: rotate (20 deg) ;
    Here, the function rotate () is used to rotate the element by 20 degrees. 
  • transform-origin :
    By default, the origin point of an element is centre. To change the origin point of the transformation there another property called as transform-origin.
    CSS 3D Transform
    Syntax:
    transform-origin: values ;
    Example:
    transform-origin: left top;
    Changes the origin of transformation to the left top of the element.
    transform-origin: 30% 50%;
    Changes the origin of x-axis by 30% and y-axis by 50%.

CSS Transform Methods - 3D Values

Along with the methods of 2D transform there are few methods used for 3D transform:

  • matrix3D(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)
    This method transforms the element and it uses 16 values of matrix.
  • perspective(n)
    This method gives the perspective view of an element allowing user to get a 3D view.
    There are two ways to add perspective to the element.
  • transform: perspective(pixel value);
    perspective() is used with the methods like rotate(), scaleX(), and so on to enhance the visual effects of the element.
    For example:
#element{
transform: perspective(450px) rotateX(45deg);
}
  • perspective: pixel value;
    For example:
#element{
perspective: 450px; 
}
#base{
transform:  rotate(60deg);
}

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS Transform</title>
<style type="text/css">
body{
font-family: cursive;
}
.base{
width: 250px;
height: 150px;
background: skyblue;
font-size:20px;
margin: 50px 0 0 40px;
}
.side{
width: 250px;
height: 150px;
background: skyblue;
font-size:20px;
margin: 80px 0 0 50px;
}
#box{
width: 250px;
height: 150px;
background: tomato;
}
#square{
width: 250px;
height: 150px;
background: blue;
transform: perspective(200px) rotateX(60deg);
}
</style>
</head>
<body>
<h1>CSS Transform 3D</h1>
<div class="base">
<div id="box"> 3D transform normal</div>
</div>
<div class="side">
<div id="square"> 3D transform perspective</div>
</div>
</body>
</html>

Output:

CSS 3D Transform

Here, element 3D transform normal shows the element without using perspective(). And the 3D transform perspective element uses perspective(200px) thus adding perfect 3D effects to the element.

  • rotate3d(x,y,z,angle)
    This method allows 3D rotation of an element along the x-axis, y-axis and z-axis together.
    Syntax:
    transform: rotate3d(x, y, z, angle);
    Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Transform</title>
<style type="text/css">
body{
font-family: cursive;
}
.base{
width: 250px;
height: 150px;
background: skyblue;
font-size:20px;
margin: 50px 0 0 40px;
}
.side{
width: 250px;
height: 150px;
background: skyblue;
font-size:20px;
margin: 80px 0 0 50px;
}
#box{
width: 250px;
height: 150px;
background: tomato;
transform: translateX(30px) rotate3d(1,1,1,45deg);
}
#square{
width: 250px;
height: 150px;
background: blue;
transform: perspective(200px)      rotate3d(1,1,1,45deg);
}
</style>
</head>
<body>
<h1>CSS Transform 3D</h1>
<div class="base">
<div id="box"> 3D transform without perspective</div>
</div>
<div class="side">
<div id="square"> 3D transform with perspective</div>
</div>
</body>
</html>

Output:

CSS 3D Transform

Above output depicts the rotate 3D() with perspective() and without perspective().

  • rotateX(angle):
    This method allows the 3D rotation of an element along the x-axis.

Syntax:

transform: rotateX(angle);

Example:

#box{
width: 250px;
height: 150px;
background: tomato;
-webkit-transform: rotateX(45deg);
}
#square{
width: 250px;
height: 150px;
background: blue;
-webkit-transform: perspective(300px) rotateX(45deg);
}

Output:

CSS 3D Transform

Here, the rotateX() function rotates the element along the x-axis. The output depicts the how the perspective() methods makes a difference in the visual effect.

  • rotateY(angle):
    Like rotateX(), rotateY() transforms the element along the y-axis.

Syntax:

transform: rotateX(angle);

Example:

#square{
width: 250px;
height: 150px;
background: blue;
transform-origin: left center;
transform: perspective(300px) rotateY(45deg);
}

Output:

CSS 3D Transform

Here, we have used transform-origin : left center; to change the origin point of the element.

  • rotateZ(angle):
    rotateZ() transforms the element along the z-axis which defines the depth.

Syntax:

transform: rotateZ(angle);
Example:
#box{
width: 250px;
height: 150px;
background: tomato;
transform: rotateZ(40deg);
}
#square{
width: 250px;
height: 150px;
background: blue;
transform: perspective(300px) rotateZ(45deg);
}

Output:

CSS 3D Transform

Above example rotates the element along the z-axis using rotateZ(45deg).

  • translate3d(x, y, z):
    This method moves the element along x-axis, y-axis and z-axis.

Syntax:

transform: translate3d(x, y, z);

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS Transform</title>
<style type="text/css">
body{
font-family: cursive;
}
.base{
width: 250px;
height: 150px;
background: skyblue;
font-size:20px;
margin: 50px 0 0 40px;
}
.side{
width: 250px;
height: 150px;
background: skyblue;
font-size:20px;
margin: 80px 0 0 50px;
}
#box{
width: 250px;
height: 150px;
background: tomato;
transform: translate3d(10px, 20px, 45px);
}
#square{
width: 250px;
height: 150px;
background: lightpink;
transform: perspective(500px) translate3d(10px, 20px, 45px);
}
</style>
</head>
<body>
<h1>CSS Transform 3D</h1>
<div class="base">
<div id="box"> 3D transform without perspective</div>
</div>
<div class="side">
<div id="square"> 3D transform with perspective</div>
</div>
</body>
</html>

Output:

CSS 3D Transform

Above example shows how the element is translated using translate3D(x,y,z) method.

  • translateX(angle):
    This method moves the element along the x-axis.

Syntax:

transform: translateX(angle);

Example:

#square{
width: 250px;
height: 150px;
background: lightpink;
transform: perspective(200px) rotateX(20deg)translateX(100px);
}

Output:

CSS 3D Transform
  • translateY(angle):
    This method moves the element along the y-axis.

Syntax:

transform: translateY(angle);

Example:

#square{
width: 250px;
height: 150px;
background: lightpink;
transform: perspective(200px) rotateX(20deg) translateY(100px);
}

Output:

CSS 3D Transform
  • translateZ(angle):
    This method moves the element along the x-axis.

Syntax:

transform: translateZ(angle);

Example:

#square{
width: 250px;
height: 150px;
background: lightpink;
transform: perspective(200px) rotateX(20deg)translateZ(100px);
}

Output:

CSS 3D Transform
  • scale3d(x,y,z):
    This methos increases the size of an element along the x-axis, y-axis and the z-axis together.

Syntax:

transform: scale3d(x, y, z);

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS Transform</title>
<style type="text/css">
body{
font-family: cursive;
}
.base{
width: 250px;
height: 150px;
background: skyblue;
font-size:20px;
margin: 50px 0 0 40px;
}
.side{
width: 250px;
height: 150px;
background: skyblue;
font-size:20px;
margin: 80px 0 0 50px;
}
#box{
width: 250px;
height: 150px;
background: tomato;
}
#square{
width: 250px;
height: 150px;
background: tomato;
transform: perspective(200px) translateZ(100px) scale3d(0.3,0.3,0.5);
}
</style>
</head>
<body>
<h1>CSS Transform 3D</h1>
<div class="base">
<div id="box">Before 3d scaling</div>
</div>
<div class="side">
<div id="square">After 3d scaling</div>
</div>
</body>
</html>

Output:

CSS 3D Transform

Above example depicts the scaling of a box element along x-axis, y-axis, and z-axis.

  • scaleX(angle):
    Increases the size of an element along the x-axis.

Syntax:

transform: scaleX(angle);
Example:
#square{
width: 250px;
height: 150px;
background: tomato;
transform-origin: left center;
transform: scaleX(2) translateX(50px);
}

Output:

CSS 3D Transform

Here the scaleX(2) increments the size of the box 2 times its width i.e. along the x-axis.

  • scaleY(angle):
    Increases the size of an element along the its height i.e. the y-axis.

Syntax:

transform: scaleY(angle);

Example:

#square{
width: 250px;
height: 150px;
background: tomato;
transform-origin: left center;
transform: scaleY(1.5) translateX(50px);
}

Output:

CSS 3D Transform

Here, the element is scaled along the y-axis i.e. 1.5 times its height.

  • scaleZ(angle):
    Increases the size of an element along the its height i.e. the y-axis.

Syntax:

transform: scaleZ(angle);

Example:

#square{
width: 250px;
height: 150px;
background: tomato;
transform-origin: left center;
transform: perspective(200px) scaleZ(2) rotateX(20deg);
}

Output:

CSS 3D Transform

Here the scaleZ() method scales the box element along z-axis, with twice its depth.

  • none:
    It is the default value of the transform. When you don’t want to apply any transformation the value is none.

Syntax:

transform: none;

Thus, in this article we have learnt the 3D transform techniques of CSS and its various methods to modify the element along x-axis, y-axis, z-axis.



ADVERTISEMENT
ADVERTISEMENT