Graphics Programs Reference
In-Depth Information
262
Figure 7-37: Translated elements.
Again, this is very much like relative positioning. h e elements are placed normally and then
transformed as directed.
When there's only one length value in a
translate()
value, it specii es a horizontal
movement and the vertical movement is assumed to be zero. If you just want to translate an
element up or down, you have two choices. First is to simply give a length of
0
for the
horizontal value.
.box1
{
transform
:
translate(0,50px)
;}
.box2
{
transform
:
translate(5em,10em)
;}
h e other is to use the value pattern
translateY()
:
.box1
{
transform
:
translateY(50px)
;}
.box2
{
transform
:
translate(5em,10em)
;}
Either way, you get Figure 7-38 as a result.
h ere is also a
translateX()
, which does about what you'd expect: moves the element
horizontally.
Search WWH ::
Custom Search