itsoffsetLeftoroffsetToppositions.Itdoes,however,affectwhereit’svisually
positionedonscreen.
Each2Dtranslationfunction—translateX,translateY,andtranslate—accepts
lengthsorpercentagesforarguments.Lengthunitsincludepixels(px),em,rem,and
viewportunits(vwandvh).
ThetranslateXfunctionchangestherelativehorizontalrenderingpositionofan
element.Ifanelementispositionedzeropixelsfromtheleft,transform: trans-
itionX(50px)wouldshiftitsrendering 50 pixelstotherightofitsoriginalposition.
Similarly,translateYchangestheverticalrenderingpositionofanelement.A
transformoftransform: transitionY(50px)offsetstheelementverticallyby 50
pixels.
Withtranslate(),wecanshiftanelementverticallyandhorizontallyusinga
singlefunction.Itacceptsuptotwoarguments:theXtranslationvalue,andtheY
translationvalue.Figure6.13showstheeffectofanelementwithatransformvalue
oftranslate(120%, -50px),wheretheleftgreensquareistheoriginalposition,
andtherightgreensquareistranslated120%horizontallyand-50pxverticallyfrom
itscontainingelement(thedashedborder).
Figure 6.13. The effect of having an element with a transform value of translate(120%, -50px)PassingasingleargumenttotranslateistheequivalentofusingtranslateX;the
Ytranslationvaluewillbesetto 0 .Usingtranslate()isthemoreconciseoption.
CSS Transforms 239