Transform translate3d

The translate3d() function in CSS is used to translate, or move, an element in three-dimensional space. The result is a datatype.The translate3d() function results in the transformation, based on the three-dimensional vector [tx, ty, tz]. The coordinates value determine the direction in which the element will move.Possible valuesThe function translate3d() takes the following values as parameter(s).tx: Can be a or value that represents the abscissa (horizontal, x-component) of the translating vector [tx, ty, tz].ty: Can be a or value that represents the ordinate (vertical, y-component) of the translating vector [tx, ty, tz].tz: Can only be a value that represents z-component of the translating vector [tx, ty, tz]. It can not have a value and if given the property containing the transform will be invalid.Syntaxtransform: translate3d(tx, ty, tz);CSS translate3d() - Length ValueFollowing is an example of translate3d() function with the various ways in which length values can be passed to it, i.e., positive and negative values: #container { border: 5px solid black; margin: 25px; } #sample { height: 110px; width: 110px; border: 2px solid black; } .translate-3d-length { transform: translate3d(20px, 30px, 20px); background-color: yellowgreen; } .translate-3d-negative { transform: translate(-20px, -10px, -30px); background-color: tomato; } no translate() applied translate3d(20px, 30px, 20px) translate3d(-20px, -10px, -30px) CSS translate3d() - Combining x-axis and z-axis valuesFollowing is an example of translate3d() function with length values passed to x-axis and z-axis: #container { border: 5px solid black; margin: 25px; } #sample { height: 110px; width: 110px; border: 2px solid black; } .translate-3d-length { transform: translate3d(20px, 0, 20px); background-color: yellowgreen; } no translate3d() translate3d(20px, 0, 20px) no translate3d() CSS translate3d() - Combining y-axis and z-axis valuesFollowing is an example of translate3d() function with length values passed to y-axis and z-axis, along with perspective() value: #container { border: 5px solid black; margin: 25px; } #sample { height: 110px; width: 110px; border: 2px solid black; } .translate-3d-length { transform: perspective(580px) translate3d(0, 30px, 50px); background-color: yellowgreen; } no translate3d() translate3d(0, 30px, 50px) no translate3d()

Take values, NOT percentage values. This makes sense because there is nothing relative to which a percentage value provided to translateZ() can resolve.Let's consider some examples.In the following code, we have a element styled as a square.CSSdiv { width: 100px; height: 100px; background-color: blue;}Let's translate it forwards by 100px:CSSdiv { width: 100px; height: 100px; background-color: blue; transform: translateZ(100px);}Surprisingly, when we run the code, there's absolutely no effect.And that's because one thing is missing from the rendering of the square so as to give the impression that it has moved closer to the viewer, i.e. perspective.So, let's incorporate perspective into our example, and see the change it brings:CSSdiv { width: 100px; height: 100px; background-color: blue; transform: perspective(1000px) translateZ(100px);}Note that we're using the perspective() function directly on the , followed by the translateZ() function.Let's see the output:Yup, it works this time.Voila! There's our forwards-translated square, larger in size, thanks to the advent of perspective into the equation.Now, let's shift gears and instead translate the square away from the viewer, using a negative z-value.This time, as per expectation, the square should appear smaller:CSSdiv { width: 100px; height: 100px; background-color: blue; transform: perspective(1000px) translateZ(-500px);}And it indeed does.Remember that if an element is given perspective via the perspective() transform function, the function must come before all other functions. Otherwise, we won't get any perspective effect.This we learnt in the previous chapter, and it's also illustrated below:CSSdiv { width: 100px; height: 100px; background-color: blue; transform: translateZ(-150px) perspective(1000px);}This is because every function is processed in the very order that it appears in transform.The translate3d() functionImagine you want to work with translations in all three axes — x, y and z. One obvious way it to use the individual functions translateX(), translateY() and translateZ().A simple example follows:CSSdiv { width: 50px; height: 50px; background-color: blue; transform: perspective(1000px) translateX(100px) translateY(100px) translateZ(-500px);}However, just as translate() is a conciser way to combine the values of translateX() and translateY(), so do we have a function to combine translation in the three axes.It's the translate3d() function.Here's the syntax of translate3d():The three arguments respectively govern translation in the x, y and z axis.tx can be

Skewed in the x direction. The angle can be represented by deg, rad or grad units. For example, skew(40deg) The skewX() transform function is available on the following: Safari 3.1 and later. iOS 2.0 and later. Google Chrome 1.0 and later. skewY() Skews the element along the x axes. Syntax: -webkit-transform: skewY(angle) Where angle represents how much the element should be skewed in the y direction. The angle can be represented by deg, rad or grad units. For example, skew(40deg) The skewY() transform function is available on the following: Safari 3.1 and later. iOS 2.0 and later. Google Chrome 1.0 and later. translate() Specifies a 2D translation vector. Syntax: -webkit-transform: translate(deltaX [, deltaY]) Where deltaX represents how much the element should be translated in the x direction, and deltaY is the number of units to translate in the y direction. The angle can be represented by a percentage or length. The translate() transform function is available on the following: Safari 3.1 and later. iOS 2.0 and later. Google Chrome 1.0 and later. translate3d() Specifies a 3D translation vector. Syntax: -webkit-transform: translate3d(deltaX, deltaY, deltaZ) Where deltaX represents how much the element should be translated in the x direction, deltaY is the number of units to translate in the y direction, and deltaZ is the number of units to translate in the z direction. The angle can be represented by a percentage or length. The translate3d() transform function is available on the following: Safari 4.0.3 and later running on Mac OS X v10.6 and later. iOS 2.0 and later. Google Chrome 12.0 and later. translateX() Specifies a translation in the x direction. Syntax: -webkit-transform: translateX(deltaX) Where deltaX represents how much the element should be translated along the x axis. The angle can be represented by a percentage or length. The translateX() transform function is available on the following: Safari 3.1 and later. iOS 2.0 and later. Google Chrome 1.0 and later. translateY() Specifies a translation in the y direction. Syntax: -webkit-transform: translateY(deltaY) Where deltaY represents how much the element should be translated along the y axis. The angle can be represented by a percentage or length. The translateY() transform function is available on the following: Safari 3.1 and later. iOS 2.0 and later. Google Chrome 1.0 and later. translateZ() Specifies a translation in the z direction. Syntax: -webkit-transform: translateZ(deltaZ) Where deltaZ represents how much the element should be translated along the z