Logo
×

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.

Related Topics

CSS Vertical Align

Vertical Align The vertical align CSS property describes the cell box of the table and an inline alignment vertically. This property is a self-explanatory and an essential property in CSS. But,...

2 minutes read.

CSS Comments

CSS Comments: Generally, comments in CSS are used to describe our code. Further, it will provide support to many users who are concerned with the code. Somewhat, these are ignored...

2 minutes read.

CSS User Interface

Introduction User Interface can be defined as series of visual elements like screens, buttons, forms that help the user interact with the software application or hardware device. CSS User Interface allows the...

6 minutes read.

CSS Images

Images in CSS: Images are a critical part of a web application. It includes various types of images in the web application that cannot be recommended. However, it is essential...

4 minutes read.

CSS Superscript and Subscript

Superscript and Subscript To specify the superscript and the subscript text, HTML provides us two tags that are <sup> and <sub>. The superscript content looks in the shorter font and half...

2 minutes read.

CSS Flex-Box

Introduction The flex-box property of CSS stands for Flexible Box Layout Module. It is specifically used to design a flexible responsive layout. Flex-box is a one dimensional layout model, i.e. it works...

6 minutes read.

How to resize an image in CSS

How to resize an image in CSS? The resize image attribute is used in responsive web design to resize images to fit within the div container automatically. The resize image attribute...

3 minutes read.

Difference between CSS Grid and CSS Flexbox

The way that information is arranged on a website reveals a lot about you or your company. Organizational abilities are just as important as having the right materials. The design...

3 minutes read.

CSS Filter

CSS Filter CSS filter is used to apply visual effects on the images, text, and other factors of the webpage. This filter property in CSS allows us to admit the effects like...

7 minutes read.

How to use google fonts in CSS

Fonts: - Fonts are used to make our website look more beautiful. Choosing appropriate font according to the web design or layout is also important. Many typefaces are accessible in...

4 minutes read.

CSS Align

CSS Center Align Elements CSS center align is used to create align by using block element. You should specify margin: auto;properties. The element will take up the specified width and the remaining space....

2 minutes read.

CSS Word Wrap

Word Wrap in CSS: The word-wrap property in CSS is referred to break any lengthy word and wrap towards the next or following line. It is employed for preventing overflow...

1 minute read.

Radial-gradient() CSS function

Radial-gradient() CSS function It defines a CSS in-built function, which produces a smooth transition among multiple colors. It is used to set any radial-gradient that is same as a background-image. This...

4 minutes read.

CSS Visibility

Visibility in CSS: This visibility property in CSS is employed to describe whether the components are visible or not. Note: An invisible component also grabs the space over the page. If...

2 minutes read.

Untitled Reusable Block

  ...

1 minute read.

Css Box Model

Introduction The Box Model property of CSS is used for design and layout of an html page. In CSS, all the elements has a rectangular box around it, you have to...

5 minutes read.

How to edit CSS in WordPress

Developing a new website or blog is a difficult undertaking. We want to create something that the consumers will adore, but we might not want the setting to take months and...

7 minutes read.

CSS Table

CSS table provides better look and feel. There are various properties of CSS table that are given below. border border-collapse padding width height text-align color background-color CSS Table Border You can set...

4 minutes read.

CSS Pagination

CSS Pagination The pagination in CSS is an advantageous approach for indexing of a website’s distinct pages over the homepage. When our site contains multiple pages, we must insert a few...

13 minutes read.

CSS Page-break-after Attribute

Page-break-after Attribute As its name implies, the page-break-before property is applied to include page break after any element, at the time of printing a document. It adds the page break after...

5 minutes read.