CSS3 Translate3D
Here is a brief description of how to move a 3D element from its current position in CSS3 using the CSS3 3D translate method.
Explanation
Property :
translate() translate3d(x,y,z) - Defines a 3D translation translateX(x) - Defines a 3D translation, using only the value for the X-axis translateY(y) - Defines a 3D translation, using only the value for the Y-axis translateZ(z) - Defines a 3D translation, using only the value for the Z-axisUsage:
transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px);
Definition:
The translate() method moves an element from its current position.
It takes the following values.
- translateX : Defines a translation, using only the value for the Y-axis
- translateY : Defines a translation, using only the value for the Y-axis
- translateZ : Defines a 3D translation, using only the value for the Z-axis
Example :
<style>
.demodiv {
position: relative;
height: 100px;
width: 100px;
background-color: indigo;
color:white;
}
#div1 {
transform:translateX(100px);
}
</style>
<div id="div1" class='demodiv'>translateX</div>
.demodiv {
position: relative;
height: 100px;
width: 100px;
background-color: indigo;
color:white;
}
#div1 {
transform:translateX(100px);
}
</style>
<div id="div1" class='demodiv'>translateX</div>
Result:
translateX
