Search within TutorialsPark

CSS3 3D Tranforms


Use CSS3 3D Transforms to create Tranformations in the 3D Plane


CSS3 3D Transform: Transform Style

1. The Property that enables you to see the object in 3D space is transform-style. The values it can assume are:

flat: Applies 3D transform only on 2d plane. It the default

preserve-3d : Applies 3D transform in 3d Plane creating an illusion of depth.

2. The value is inherited by element's child elements and not the element itself.

CSS Example : transform-style property

Give it a TRY! » Note: You can set different time durations for different properties seperated by commas, and exactly in the order they appear


CSS3 3D Transform: Perspective and Perspective Origin

Any man who reads too much and uses his own brain too little falls into lazy habits of thinking.
You have to learn the rules of the game. And then you have to play better than anyone else.


Perspective: 500px


1.To create an illusion of depth for an element, use need to use the CSS3 property of perspective.Or else the element appears flattened.

2. It basically distorts the image, making things nearer to user appear larger and that away from him appear shorter in size. Values are specified in length units(px, em, cm).

2. A sister property of perspective is perspective-origin , it defines the origin from where the transform is seen.

Example: CSS transition-timing-function

Give it a TRY! »


3D Tranformation Funtions

CSS3 : 3D Translations along X , Y and Z Axis


TransX: TransY: TransZ:


CSS3 3D Transform translateX()

1. CSS3 transform function translateX() is used to translate elements along the X axis.

2. All the values are specified in length units(px,cm).

Example: CSS3 3D Transform translateX()

Give it a TRY! » Note: Seperate transition delay for different properties are seperated by commas


CSS3 3D Transform translateY()

1. CSS3 transform function translateY() is used to translate elements along the Y axis.

2. All the values are specified in length units(px,cm).

Example: CSS3 3D Transform translateY()

Give it a TRY! »


CSS3 3D Transform translateZ()

Square1
Square2
Square3

TranslateZ(Square1): TranslateZ(Square2): TranslateZ(Square3):

1. CSS3 transform function translateZ() is used to translate elements along the Z axis.

2. All the values are specified in length units(px,cm).

Example: CSS3 3D Transform translateZ()

Give it a TRY! » Note: Multiple transitions can be specified using commas


CSS3 3D Transform translate3d()


1. CSS3 transform function translate3d() is a shorthand to translate elements along all 3 axis in a single declaration.

2. All the values are specified in length units(px,cm).

Example: CSS3 3D Transform translate3d()

Give it a TRY! » Note: Multiple transitions can be specified using commas


CSS3 3D Transformation: Rotate


RotateX: RotateY: RotateZ:

CSS3 3D Transform RotateX()

1. CSS3 transform function rotateX() is used to rotate elements along the X axis.

2. All the values can be specified in degrees, radians, gradians and turns.

Example: CSS3 3D Transform rotateX()

Give it a TRY! » Note: Multiple transitions can be specified using commas


CSS3 3D Transform rotateY()

1. CSS3 transform function rotateY() is used to rotate elements along the Y axis.

2. All the values can be specified in degrees, radians, gradians and turns.

Example: CSS3 3D Transform rotateY()

Give it a TRY! » Note: Multiple transitions can be specified using commas


CSS3 3D Transform rotateZ()

1. CSS3 transform function rotateZ() is used to elements along the Z axis.

2. All the values can be specified in degree, radians, gradians and turns.

Example: CSS3 3D Transform rotateZ()

Give it a TRY! » Note: Multiple transitions can be specified using commas


CSS3 3D Transform transformation-origin

pizza pizza

1. The origin is the point where all the three co-ordinate axis intersects i.e (0,0,0). This point can be shifted using CSS3 property transform-origin.

2. The values can be specified as keywords(top left, bottom right etc), percent and length units(em, px, cm).

Example: CSS3 3D Transform transform-origin()

Give it a TRY! » Note: All distances are with reference to the top-left corner(i.e (0,0,0))


CSS3 3D Transform backface-visibility

The Adventures of Tintin is a series of comic series written by Belgian cartoonist Georges Remi(Herge)

Note: Hover over the image to see the text on the backface

1. The backface of the element is always transparent and can be seen when the element is rotated by 90deg or more, its a reverse image of the front contents(image and text).

2. You can use the CSS3 3D transform property backface-visibility to control the backface visibility of the element. Possible values are :

hidden : The backface of the element is not visible, creating an illusion of element with two faces.

visible : The backface is visible and the reverse of the front content is visible from backside.

Example: CSS3 3D Transform backface-visibility

Give it a TRY! » Note: Multiple transitions can be specified using commas


CSS3 3D Transform Scale function

ScaleX: ScaleY: ScaleZ:

CSS3 3D Transform ScaleX() function

1. CSS3 transform function scaleX() is used to scale elements along the X axis.

2. The values specify the scaling factor by which the objects are scaled.

Example: CSS3 3D Transform ScaleX()

Give it a TRY! » Note: Multiple transitions can be specified using commas


CSS3 3D Transform scaleY()

1. CSS3 transform function scaleY() is used to scale elements along the Y axis.

2. The values specifies the scaling factor by which the element is scaled.

Example: CSS3 3D Transform scaleY()

Give it a TRY! » Note: Multiple transitions can be specified using commas


CSS3 3D Transform scaleZ()

1. CSS3 transform function scaleZ() is used to scale elements along the Y axis.

2. The values specifies the scaling factor by which the element is scaled.

Example: CSS3 3D Transform scaleZ()

Give it a TRY! » Note: Multiple transitions can be specified using commas