The translate () function moves the element in the specified direction, similar to relativein position. Or, in a simple sense, using the translate () function, you can move an element from its original position without affecting any Web components on the x, Y axis.
Translate we are divided into three different situations:
1. Translate (x, y) moving horizontally and vertically (i.e. simultaneous movement of the y axis and axis)
2, TranslateX (x) only move horizontally (x-axis movement)
3, Translatey (y) only move vertically (Y-axis movement)
Example Demo: move an element to the right of the y-axis by moving it 100px through the translate () function to the right of the 50px,x axis.
HTML code:
<class= "wrapper"> <Div> I move right down </div></div>
CSS code:
. Wrapper{width:200px;Height:200px;Border:2px dotted Red;margin:20px Auto;}. Wrapper Div{width:200px;Height:200px;Line-height:200px;text-align:Center;background:Orange;Color:#fff;-webkit-transform:Translate (50px,100px);-moz-transform:Translate (50px,100px);Transform:Translate (50px,100px);}
Demo results
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"><title>Morphing and animation</title><Linkhref= "Style.css"rel= "stylesheet"type= "Text/css"></Head> <Body><Divclass= "wrapper">I don't know what my width and height are, I'm going to achieve horizontal vertical centering</Div></Body></HTML>
Css:
. Wrapper{padding:20px;background:Orange;Color:#fff;position:Absolute;Top:50%; Left:50%;Border-radius:5px;-webkit-transform:Translate ( -50%,-50%);-moz-transform:Translate ( -50%,-50%);Transform:Translate ( -50%,-50%);}
Deformation--displacement translate ()
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
