A transform is an effect that lets an element change shape, size and position.
You can transform your elements using 2D or 3D transformation.
Internet Explorer does not yet support the transform property.
Firefox requires the prefix -moz-.
Chrome and Safari requires the prefix -webkit-.
Opera requires the prefix -o-.
In this chapter you will learn about the 2d transform methods:
You will learn about 3D transforms in the next chapter.
With the translate() method, the element moves from its current position, depending on the
parameters given for the left (X-axis) and the top (Y-axis) position:
The value translate(50px,100px) moves the element 50 pixels from the left, and 100 pixels from
With the scale() method, the element increases or decreases the size, depending on the
parameters given for the width (X-axis) and the height (Y-axis):
The value scale(2,4) transforms the width to be twice its original size, and the height 4 times
its original size.
With the skew() method, the element turns in a given angle, depending on the parameters given for
the horizontal (X-axis) and the vertical (Y-axis) lines:
The value skew(30deg,20deg) turns the element 30 degrees around the X-axis, and 20 degrees around
The matrix() method combines all of the 2D transform methods into one.
The matrix method take six parameters, containing mathematic functions, which allows you to:
rotate, scale, move (translate), and skew elements.
How to rotate a div element 30 degrees, using the matrix method:
The Below table lists all the transform properties:
Your Query was successfully sent!