CSS3 3d Transforms CSS3

What are CSS 3D transforms?

With the use of 3d transforms, One can move the desired element to x-axis, y-axis and z-axis, Below displayed example clearly defines how the element would be rotating.

What are CSS Methods of 3D transforms?

Below displayed methods are used for calling 3D transforms

Values

Description

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

It is used to transform the element by using 16 values of matrix

translate3d(x,y,z)

It is used to transform the element by using x-axis,y-axis and z-axis

translateX(x)

It is used to transform the element by using x-axis

translateY(y)

It is used to transform the element by using y-axis

translateZ(z)

It is used to transform the element by using y-axis

scaleX(x)

It is used to transform the element by using x-axis

scaleY(y)

It is used to transform the element by using y-axis

scaleY(y)

It is used to transform the element by using z-axis

rotateX(angle)

It is used to transform the element by using x-axis

rotateY(angle)

It is used to transform the element by using y-axis

rotateZ(angle)

It is used to transform the element by using z-axis

What is CSS X-axis 3D transforms?

The below example shows the x-axis 3D transforms

It will produce following result:

CSS Methods of 3D transforms

What is CSS Y-axis 3D transforms?

The below example displays the y-axis 3D transforms

It will produce following result:

CSS Y-axis 3D transforms

What is CSS Z-axis 3D transforms?

The following an example shows the Z-axis 3D transforms

It will produce following result:

CSS Z-axis 3D transforms

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

CSS3 Topics